Hover, Focus & Group States

<a class="text-slate-600 hover:text-cyan-600 hover:underline transition-colors">
<input class="border rounded-lg px-3 py-2 focus:border-cyan-500 focus:ring-2
  focus:ring-cyan-500/30 focus:outline-none">
<button class="disabled:opacity-50 disabled:cursor-not-allowed">

<!-- Group hover — parent triggers child style -->
<div class="group cursor-pointer">
  <h3 class="group-hover:text-cyan-600">Course Title</h3>
  <p class="text-slate-500 group-hover:text-slate-700">Description</p>
</div>