الحالات التفاعلية

<button class="bg-blue-500 hover:bg-blue-700 active:scale-95">
  زر
</button>
<input class="border focus:border-purple-500 focus:ring-2" />

<button class="opacity-100 disabled:opacity-50 disabled:cursor-not-allowed">
  زر
</button>

<div class="group">
  <h3>عنوان</h3>
  <p class="opacity-0 group-hover:opacity-100">يظهر عند المرور على البطاقة</p>
</div>

<input type="checkbox" class="peer" />
<div class="hidden peer-checked:block">يظهر عند التحديد</div>

<div class="bg-white md:hover:bg-gray-100">...</div>