Buttons

Styling Buttons with Tailwind

Interactive states use variant prefixes:

<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white px-6 py-3 rounded-lg">
  Click Me
</button>

State variants:

• hover: — when mouse is over
• focus: — when keyboard-focused
• active: — while being clicked
• disabled: — when disabled

Transition for smoothness:

• transition-colors — animate color changes
• transition-all — animate all properties
• duration-200 — 200ms transition

Focus ring for accessibility:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
  Accessible Button
</button>

Cursor:

• cursor-pointer — hand cursor on hover

Your Task

Create 3 buttons: primary (blue), secondary (white), and danger (red), each with hover, focus, and active states.