# Better hover/active states, Tailwind CSS

## Preview:

https://gist.github.com/user-attachments/assets/4af1f288-6c64-41e0-8765-56fb8e5da29c

## Tailwind Play link:

[https://play.tailwindcss.com/7HbSJlaQGT](https://play.tailwindcss.com/7HbSJlaQGT)

# Use case: A card with main action and secondary action

https://gist.github.com/user-attachments/assets/420b6008-965c-424a-a610-6544a1774804

## HTML if the link is broken

```html
<div class="grid gap-6 bg-slate-100 p-4">
  <h1>Use case: card with main link and other actions</h1>
  <div class="rounded-md border bg-white p-4">
    <div class="group/item relative flex items-center justify-between rounded-md border p-4 hovered-action:bg-blue-100 hovered-action:ring-2 hovered-action:ring-black pressed-action:bg-blue-600">
      <p class="font-bold group-hovered-action/item:text-blue-600 group-pressed-action/item:text-white">Mykolas Mankevicius</p>
      <div class="flex gap-4">
        <button type="button" class="peer z-10 block rounded border bg-white px-2 py-1 hovered:bg-red-50 hovered:text-red-900 pressed:bg-red-200">Remove</button>
        <button type="button" class="action block rounded border bg-slate-600 px-2 py-1 text-white before:absolute before:inset-0 hovered:bg-slate-900">View Profile</button>
        <div class="peer-hovered:bg-amber-50 peer-pressed:bg-amber-100">peer-pressed = bg-amber-100</div>
      </div>
    </div>
  </div>
</div>
```