Component Recipes

Component Recipes

Overview

Ready-to-use Tailwind CSS patterns for demo components.

Card Recipes

Basic Card

<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  {children}
</div>

Clickable Card

<button className="w-full text-left bg-white rounded-lg shadow-md p-6 hover:shadow-lg hover:ring-2 hover:ring-brand-primary/20 transition-all focus:outline-none focus:ring-2 focus:ring-brand-primary">
  {children}
</button>

Selected Card

<div className="bg-white rounded-lg shadow-md p-6 ring-2 ring-brand-primary">
  {children}
</div>

Badge Recipes

Severity Badges

// Safety Hazard
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
  {label}
</span>

// Repair Needed
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
  {label}
</span>

// Maintenance Item
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
  {label}
</span>

// Monitor
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
  {label}
</span>

// Informational
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
  {label}
</span>

Condition Badges

// Excellent
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  {label}
</span>

// Good
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-lime-100 text-lime-800">
  {label}
</span>

// Fair / Poor (use yellow-100/orange-100)

Badge Sizes

// Small
className="px-2 py-0.5 text-xs"

// Medium (default)
className="px-2.5 py-0.5 text-xs"

// Large
className="px-3 py-1 text-sm"

Button Recipes

Primary Button

<button className="px-4 py-2 bg-brand-primary text-white rounded-md font-medium hover:bg-brand-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary focus:ring-offset-2 transition-colors">
  {label}
</button>

Secondary Button

<button className="px-4 py-2 bg-white text-neutral-700 border border-neutral-300 rounded-md font-medium hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-brand-primary focus:ring-offset-2 transition-colors">
  {label}
</button>

Ghost Button

<button className="px-4 py-2 text-brand-primary rounded-md font-medium hover:bg-brand-primary/10 focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors">
  {label}
</button>

Icon Button

<button className="p-2 text-neutral-500 rounded-md hover:bg-neutral-100 hover:text-neutral-700 focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors">
  <Icon className="w-5 h-5" />
</button>

Modal Recipes

Modal Overlay

<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />

Modal Content

<div className="fixed inset-0 flex items-center justify-center p-4">
  <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-auto">
    <div className="p-6">
      {children}
    </div>
  </div>
</div>

Modal Header

<div className="flex items-center justify-between pb-4 border-b border-neutral-200">
  <h2 className="text-xl font-semibold text-neutral-900">{title}</h2>
  <button className="p-1 text-neutral-400 hover:text-neutral-600 rounded">
    <X className="w-5 h-5" />
  </button>
</div>

Input Recipes

Text Input

<input
  type="text"
  className="w-full px-3 py-2 border border-neutral-300 rounded-md text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-shadow"
  placeholder="Enter text..."
/>

Input with Error

<input
  className="w-full px-3 py-2 border border-red-500 rounded-md text-neutral-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
/>
<p className="mt-1 text-sm text-red-600">{errorMessage}</p>

Progress Recipes

Progress Bar

<div className="w-full h-2 bg-neutral-200 rounded-full overflow-hidden">
  <div
    className="h-full bg-brand-primary transition-all duration-500"
    style={{ width: `${percentage}%` }}
  />
</div>

Colored Progress (Condition-based)

// className based on condition
const progressColor = {
  excellent: 'bg-green-500',
  good: 'bg-lime-500',
  fair: 'bg-yellow-500',
  poor: 'bg-orange-500',
}[condition];

Layout Recipes

Page Container

<div className="min-h-screen bg-neutral-50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {children}
  </div>
</div>

Card Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

Section Header

<div className="flex items-center justify-between mb-6">
  <h2 className="text-2xl font-semibold text-neutral-900">{title}</h2>
  <div className="flex items-center gap-2">
    {actions}
  </div>
</div>

Best Practices

• Use semantic color tokens (brand-primary, severity-, condition-)
• Maintain consistent spacing (4px grid)
• Include focus states for accessibility
• Use transition classes for smooth interactions

Anti-Patterns

• NO hardcoded hex colors
• NO inconsistent border-radius
• NO missing focus states
• NO arbitrary spacing values