Hover & Focus States

<button class="bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-300 focus:outline-none active:bg-indigo-800">
  Hover, focus, active
</button>

<input class="border focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" />

<a class="text-blue-600 hover:text-blue-800 hover:underline visited:text-purple-600">
  Link states
</a>

<!-- Group hover: parent hover styles children -->
<div class="group block p-4 hover:bg-gray-50">
  <span class="text-gray-600 group-hover:text-blue-600">Child</span>
</div>