<!DOCTYPE html>
<
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 Transition Property Class</
b
>
<
div
class
=
"bg-green-200 m-8 grid grid-flow-col gap-4 p-5"
>
<
button
class="transition duration-500 ease-in-out
bg-green-300 hover:bg-green-600 transform
hover:-translate-y-1 hover:scale-110
rounded-lg p-4 border border-green-900">
Hover me
</
button
>
<
button
class="transition-opacity duration-500 ease-in-out
bg-green-300 hover:opacity-75 transform
hover:-translate-y-1 hover:scale-110
rounded-lg p-4 border border-green-900">
Hover me
</
button
>
<
button
class="transition-none duration-500 ease-in-out
bg-green-300 hover:bg-green-600 transform
hover:-translate-y-1 hover:scale-110
rounded-lg p-4 border border-green-900">
Hover me
</
button
>
<
button
class="transition-colors duration-500 ease-in-out
bg-green-300 hover:bg-yellow-600 transform
hover:scale-110 rounded-lg p-4 border
border-green-900 hover:border-black">
Hover me
</
button
>
</
div
>
</
body
>
</
html
>