Part 50: Micro-Interactions: Modals, Toasts & Action Triggers

Micro-interactions make a digital product feel responsive, delightful, and alive.

1. Sliding Toast Notification

<div class="fixed bottom-5 right-5 flex items-center gap-3 bg-slate-900 text-white px-5 py-3.5 rounded-xl shadow-2xl border border-slate-800 transition transform translate-y-0 opacity-100">
  <span class="text-emerald-400 text-lg">✓</span>
  <span class="text-sm font-medium">Changes saved successfully!</span>
</div>

2. Modal Overlay with Blur

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
  <div class="bg-white dark:bg-slate-800 rounded-2xl max-w-md w-full p-6 shadow-2xl border border-slate-100 dark:border-slate-700">
    <h3 class="text-lg font-bold text-slate-900 dark:text-white">Confirm Payment</h3>
    <p class="text-slate-500 text-sm mt-2">Are you sure you want to proceed with this purchase?</p>
    <div class="mt-6 flex justify-end gap-3">
      <button class="px-4 py-2 text-sm font-semibold text-slate-600 hover:text-slate-900">Cancel</button>
      <button class="px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-sm">Confirm</button>
    </div>
  </div>
</div>

Key Takeaways

• Combine backdrop-blur-sm with translucent overlays for modern dialogs.
• Keep feedback animations under 300ms to maintain speed.

In Part 51, we enter Module 9 to dive deep into tailwind.config.js: Extending Themes!