States & Interactivity

Make your UI come alive with hover effects, focus states, and smooth transitions.

Hover State

Apply styles on mouse hover:

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Hover me
</button>

Focus State

Style focused elements (important for accessibility!):

<input
  type="text"
  class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded-lg px-4 py-2 outline-none"
  placeholder="Click or tab here"
>

Active State

Style while clicking/pressing:

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 active:scale-95 text-white px-4 py-2 rounded transition">
  Click and hold
</button>

Combining States

You can combine multiple state variants:

<button class="
  bg-white text-gray-700 border border-gray-300
  hover:bg-gray-50 hover:border-gray-400
  focus:ring-2 focus:ring-blue-500
  active:bg-gray-100
  disabled:opacity-50 disabled:cursor-not-allowed
  px-4 py-2 rounded-lg transition
">
  Multi-state button
</button>

Transitions

Smooth state changes with transitions:

<div class="transition duration-300">Smooth changes</div>
<div class="transition-colors duration-300">Color transitions</div>
<div class="transition-transform duration-300">Transform transitions</div>

Group Hover

Style children based on parent hover:

<div class="group bg-white rounded-xl p-6 shadow hover:shadow-lg transition cursor-pointer">
  <div class="w-12 h-12 bg-blue-100 group-hover:bg-blue-200 rounded-lg transition">
    Icon
  </div>
  <h3 class="mt-4 font-semibold group-hover:text-blue-600 transition">
    Card Title
  </h3>
</div>

Practical Examples

Interactive Button Set

<div class="flex gap-4">
  <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium transition shadow hover:shadow-md">
    Primary
  </button>
  <button class="bg-white hover:bg-gray-50 text-gray-700 px-6 py-2.5 rounded-lg font-medium border border-gray-300 transition">
    Secondary
  </button>
  <button class="text-blue-600 hover:bg-blue-50 px-6 py-2.5 rounded-lg font-medium transition">
    Ghost
  </button>
</div>

Animated Card

<div class="group relative overflow-hidden rounded-xl bg-white shadow-md hover:shadow-xl transition-all cursor-pointer">
  <img class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500">
  <div class="p-6">
    <h3 class="font-semibold text-lg group-hover:text-blue-600 transition-colors">
      Project Title
    </h3>
    <div class="mt-4 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all">
      View Project →
    </div>
  </div>
</div>

Form Input

<input
  type="email"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition outline-none"
  placeholder="you@example.com"
>

Key Takeaways

• hover:: Mouse hover state
• focus:: Keyboard/click focus state
• active:: While pressing/clicking
• group-hover:: Child styled on parent hover
• transition: Enable smooth state changes
• duration-*: Control transition speed
• Combine states: hover:bg-blue-600 focus:ring-2 active:scale-95

Next, let's customize Tailwind to match your brand!