Tailwind CSS Custom Components — Building Reusable UI Patterns

// Button.jsx
function Button({ variant = 'primary', size = 'md', children, disabled, ...props }) {
  const base = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';

  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
    ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-400',
  };

  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      className={`${base} ${variants[variant]} ${sizes[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      disabled={disabled}
      {...props}>
      {children}
    </button>
  );
}

<Button variant="primary" size="md">Primary</Button>
<Button variant="secondary" size="lg">Secondary Large</Button>
<Button variant="danger" size="sm" disabled>Disabled Danger</Button>
<Button variant="ghost">Ghost Button</Button>

// Card.jsx
function Card({ children, className = '', hover = false, padding = 'md' }) {
  const paddings = { sm: 'p-4', md: 'p-6', lg: 'p-8' };

  return (
    <div className={`
      bg-white rounded-xl border border-gray-200 shadow-sm
      ${hover ? 'hover:shadow-md hover:border-gray-300 transition-all duration-200' : ''}
      ${paddings[padding]}
      ${className}
    `}>
      {children}
    </div>
  );
}

function CardHeader({ children }) {
  return <div className="border-b border-gray-100 pb-4 mb-4">{children}</div>;
}

function CardBody({ children }) {
  return <div>{children}</div>;
}

function CardFooter({ children }) {
  return <div className="border-t border-gray-100 pt-4 mt-4">{children}</div>;
}

<Card hover padding="lg">
  <CardHeader><h3 class="text-xl font-bold">Card Title</h3></CardHeader>
  <CardBody><p class="text-gray-600">Card content goes here with proper spacing.</p></CardBody>
  <CardFooter><button class="text-blue-600 hover:text-blue-800">Action</button></CardFooter>
</Card>

// Badge.jsx
function Badge({ variant = 'default', size = 'md', children }) {
  const variants = {
    default: 'bg-gray-100 text-gray-800',
    success: 'bg-green-100 text-green-800',
    error: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
    info: 'bg-blue-100 text-blue-800',
    purple: 'bg-purple-100 text-purple-800',
  };

  const sizes = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-0.5 text-sm',
    lg: 'px-3 py-1 text-base',
  };

  return (
    <span className={`inline-flex items-center font-medium rounded-full ${variants[variant]} ${sizes[size]}`}>
      {children}
    </span>
  );
}

<Badge variant="success">Active</Badge>
<Badge variant="error">Blocked</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="purple" size="lg">Custom</Badge>

// Modal.jsx
function Modal({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm"
           onClick={onClose}></div>

      {/* Modal */}
      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 p-6 z-10
                      animate-slide-in">
        {/* Header */}
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
          <button onClick={onClose}
                  className="text-gray-400 hover:text-gray-600 transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>

        {/* Content */}
        <div className="text-gray-600">{children}</div>

        {/* Footer */}
        <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
          <button onClick={onClose}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
            Cancel
          </button>
          <button className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
            Confirm
          </button>
        </div>
      </div>
    </div>
  );
}

// Using composed components
function UserProfileCard({ user }) {
  return (
    <Card hover>
      <div className="flex items-center gap-4">
        <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
          {user.initials}
        </div>
        <div className="flex-1">
          <h3 className="font-bold text-gray-900">{user.name}</h3>
          <p className="text-sm text-gray-500">{user.role}</p>
        </div>
        <Badge variant={user.status === 'active' ? 'success' : 'error'}>
          {user.status}
        </Badge>
      </div>
    </Card>
  );
}