Tailwind CSS Transition Effects

Hover or click to see smooth animations

Scale on Hover

hover:scale-105 transition-transform

Opacity Fade

hover:opacity-70 transition-opacity

Shadow Lift

hover:shadow-2xl transition-shadow

Color Change

hover:bg-indigo-500 transition-colors

Rotate Icon

group-hover:rotate-180 transition-transform

Slide Motion

group-hover:translate-x-2 transition-transform

Toggle Expand

This content smoothly expands and collapses using Alpine.js and Tailwind transitions!

Skew Effect

group-hover:skew-y-3 transition-transform

Combined Effects

transition-all duration-500

Interactive Button

Transition Durations

duration-75

duration-150

duration-300

duration-500

duration-1000