🃏 Cards & Buttons
Complete showcase of card layouts and button components with interactive states
🎭 Component Demonstrations
Interactive showcase of all card and button components with real-time functionality
🃏 Card Components
Various card layouts for content presentation
Basic Cards
Simple Card
Basic card with title, content, and minimal styling for general content presentation.
Image Card
Card with header image and content below.
Featured Card
Special card with gradient background for highlighted content.
Product Cards
Sale
Premium T-Shirt
Comfortable cotton blend
$39.99
$59.99
Compact Product
Brief description
$29.99
Detailed Product
In StockComprehensive product description with more details about features and benefits.
Color:
Size:
S
M
L
$79.99
🔥 Button Components
Premium button variants with animations and interactive states
Basic Button Styles
Primary Buttons
Secondary Buttons
State Buttons
Interactive Button States
Loading State
Toggle State
Counter
Disabled State
Button Groups
Horizontal Button Group
Action Button Group
📝 Usage Examples
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<h4 class="text-lg font-semibold text-gray-900 mb-2">Card Title</h4>
<p class="text-gray-600 text-sm mb-4">Card content here</p>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Action</button>
</div>
<button class="px-6 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors">
Primary Button
</button>
<button class="px-6 py-3 border-2 border-orange-600 text-orange-600 rounded-lg hover:bg-orange-600 hover:text-white transition-colors">
Outline Button
</button>
<div x-data="{ loading: false }">
<button @click="loading = !loading" :disabled="loading"
:class="loading ? 'bg-gray-400' : 'bg-blue-600 hover:bg-blue-700'"
class="px-6 py-3 text-white rounded-lg transition-colors">
<span x-show="!loading">Click Me</span>
<span x-show="loading">Loading...</span>
</button>
</div>
⚡ Performance & Accessibility
Component Best Practices
- 🎯 Card accessibility uses semantic HTML structure with proper heading hierarchy and ARIA labels for interactive elements
- ⚡ Button performance optimized with CSS transforms and hardware acceleration for smooth hover states and transitions
- 📱 Touch-friendly interactions with minimum 44px touch targets and responsive grid layouts for mobile devices
- ⌨️ Keyboard navigation support with focus states, tab order, and Enter/Space key activation for all interactive elements