Pure Tailwind CSS Demo
No CSS Modules - only Tailwind utility classes
🎨 Shadcn UI Components
Buttons
Button Sizes
Cards
Shadcn Card
This is a card built with shadcn/ui
Card content goes here with proper styling.
Custom Styled Card
With Tailwind customization
Shadcn + Tailwind = ❤️
Badges
Default
Secondary
Destructive
Outline
Inputs
Card One
Basic Tailwind card with border.
Card Two
Gradient background card.
✨
Card Three
Dashed border style.
Typography
text-xs: Extra small text
text-sm: Small text
text-base: Base text
text-lg: Large text
text-xl: Extra large text
text-2xl: 2XL text
LightNormalMediumSemiboldBold
ItalicUnderlineStrikethroughuppercasecapitalize text
Opacity
100%
75%
50%
25%
10%
Shadows
sm
default
md
lg
xl
2xl
Border Radius
none
sm
def
md
lg
xl
2xl
full
Hover & Focus States
Ring Utilities
ring-1
ring-2
ring-4
offset
Color Palette
Red
Blue
Green
Violet
Custom Theme Colors
PrimaryAccentSuccessErrorChart 1Chart 2
Gradient Variations
Animations
spinpingpulsebounce
