<!DOCTYPE html>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class
=
"text-center mx-4 space-y-2"
>
<
h1
class
=
"text-green-600 text-5xl font-bold"
>
GeeksforGeeks
</
h1
>
<
b
>Tailwind CSS Width Class</
b
>
<
div
class
=
"flex"
>
<
div
class
=
"w-1/2 bg-green-600 h-12 rounded-l-lg"
>
w-1/2
</
div
>
<
div
class
=
"w-1/2 bg-green-300 h-12 rounded-r-lg"
>
w-1/2
</
div
>
</
div
>
<
div
class
=
"flex ..."
>
<
div
class
=
"w-2/5 bg-green-600 h-12 rounded-l-lg"
>
w-2/5
</
div
>
<
div
class
=
"w-3/5 bg-green-300 h-12 rounded-r-lg"
>
w-3/5
</
div
>
</
div
>
<
div
class
=
"flex ..."
>
<
div
class
=
"w-1/3 bg-green-600 h-12 rounded-l-lg"
>
w-1/3
</
div
>
<
div
class
=
"w-2/3 bg-green-300 h-12 rounded-r-lg"
>
w-2/3
</
div
>
</
div
>
<
div
class
=
"flex ..."
>
<
div
class
=
"w-1/4 bg-green-600 h-12 rounded-l-lg"
>
w-1/4
</
div
>
<
div
class
=
"w-3/4 bg-green-300 h-12 rounded-r-lg"
>
w-3/4
</
div
>
</
div
>
<
div
class
=
"flex ..."
>
<
div
class
=
"w-1/5 bg-green-600 h-12 rounded-l-lg"
>
w-1/5
</
div
>
<
div
class
=
"w-4/5 bg-green-300 h-12 rounded-r-lg"
>
w-4/5
</
div
>
</
div
>
<
div
class
=
"flex ..."
>
<
div
class
=
"w-1/6 bg-green-600 h-12 rounded-l-lg"
>
w-1/6
</
div
>
<
div
class
=
"w-5/6 bg-green-300 h-12 rounded-r-lg"
>
w-5/6
</
div
>
</
div
>
<
div
class
=
"w-full bg-green-300 h-12 rounded-lg"
>
w-full
</
div
>
</
body
>
</
html
>