This is a hero section. Notice how everything is centered using flexbox. The gradient text above uses bg-clip-text trick!
Notice the group-hover effect. When you hover the card, the icon scales up!
Grid automatically handles responsive layout. Resize your browser to see!
This card spans 2 columns on tablet but goes back to 1 on desktop. Responsive magic!
On mobile, this content stacks vertically (flex-col). On desktop, it sits side-by-side (flex-row). The flex-1 class makes both sides take equal space.
The blurry circle behind this text uses absolute positioning. This text uses relative positioning with z-10 to appear on top!
Hover me to move up!
Hover me to rotate!
Hover me to grow!
Hover me to skew!
Built-in Tailwind animations: bounce, pulse, spin, ping
Resize your browser! This box changes color at different breakpoints:
Mobile (red) Small (orange) Medium (yellow) Large (green) Extra Large (blue) 2X Large (purple)
w-full (100% width)
w-3/4 (75% width)
w-1/2 (50% width)
w-1/4 (25% width)
2x2 Grid Item
1x1
1x1
2x1 Wide Item
1x2 Tall
1x1
1x1
1x1