Navigation

Menu comes in two modes:dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brandbrand

Sizing

Height

Set a height of an element in pixels instantly by using the following height utility classes.

50px
75px
100px
125px
ClassValues
class="h-[value]p"25 / 30 / 35 / 40 / 45 / 50 ... / 800(step of 5)
class="mh-[value]p"100 / 125 / 150 / 200 / 225 ... / 800(step of 25)
Set max-height of an element
class="mnh-[value]p"100 / 125 / 150 / 200 / 225 ... / 800(step of 25)
Set min-height of an element
Height in percentage

Easily make an element as tall(relative to its parent) with the following height utilities.

auto
25%
50%
75%
100%
ClassValues
class="h-[value]"25 / 30 / 35 / 40 / 45 / 50 ... / 100(step of 5)
class="h-auto"Set the height to auto
class="mh-100"Set max-height of an element to 100%
Width

Set a width of an element in pixels instantly by using the following width utility classes.

50px
75px
100px
150px
ClassValues
class="w-[value]p"class="w-sm-[value]p"class="w-md-[value]p"class="w-lg-[value]p"class="w-xl-[value]p"class="w-xxl-[value]p"25 / 30 / 35 / 40 / 45 / 50 ... / 800(step of 5)
class="mw-[value]p"25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800(step of 25)
Set max-width of an element
class="mnw-[value]p"25 / 50 / 75 / 100 / 125 / 150 / 200 / 225 ... / 800(step of 25)
Set min-width of an element
Width in percentage

Easily make an element as wide(relative to its parent) with the following width utilities.

25%
50%
75%
100%
auto
ClassValues
class="w-[value]"class="w-sm-[value]"class="w-md-[value]"class="w-lg-[value]"class="w-xl-[value]"class="w-xxl-[value]"5 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 ... / 100(step of 5)
class="w-auto"Set the width to auto
class="mw-100"Set max-width of an element to 100%
Equal Height & Width

Easily make an element of equal height & width using the following utility classes.

d-46
d-74
d-100
ClassValues
class="d-[value]"8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 ... / 50(step of 2)
class="d-[value]"54 / 58 / 62 / 66 / 70 / 74 / 78 / 82 / 86 / 90 / 94 / 98(step of 4)
class="d-[value]"100 / 110 / 120 / 130 / 140 / 150(step of 10)