tailwind-components

# Tailwind Components Skill

Common component patterns built with Tailwind CSS.

## Buttons

### Button Variants

```html
<!-- Primary button -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg
               hover:bg-blue-700 focus:outline-none focus:ring-2
               focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Primary
</button>

<!-- Secondary button -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-lg
               hover:bg-gray-300 focus:outline-none focus:ring-2
               focus:ring-gray-500 focus:ring-offset-2 transition-colors">
  Secondary
</button>

<!-- Outline button -->
<button class="px-4 py-2 border-2 border-blue-600 text-blue-600 font-medium
               rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2
               focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Outline
</button>

<!-- Ghost button -->
<button class="px-4 py-2 text-blue-600 font-medium rounded-lg
               hover:bg-blue-50 focus:outline-none focus:ring-2
               focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Ghost
</button>

<!-- Destructive button -->
<button class="px-4 py-2 bg-red-600 text-white font-medium rounded-lg
               hover:bg-red-700 focus:outline-none focus:ring-2
               focus:ring-red-500 focus:ring-offset-2 transition-colors">
  Delete
</button>
```

### Button Sizes

```html
<!-- Small -->
<button class="px-3 py-1.5 text-sm">Small</button>

<!-- Medium (default) -->
<button class="px-4 py-2 text-base">Medium</button>

<!-- Large -->
<button class="px-6 py-3 text-lg">Large</button>
```

### Button with Icon

```html
<button class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600
               text-white rounded-lg hover:bg-blue-700">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 4v16m8-8H4" />
  </sv