Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Toast Notification</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-100 min-h-screen p-6 antialiased" x-data="{ visible: true }"> <div class="fixed bottom-10 right-10 z-50"> <div x-show="visible" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="translate-y-10 opacity-0" x-transition:enter-end="translate-y-0 opacity-100" x-transition:leave="transition ease-in duration-200 transform opacity-0 translate-x-10" class="w-80 bg-slate-900 text-white rounded-3xl p-5 shadow-3xl border border-white/5 flex gap-4" style="display: none;" > <div class="h-10 w-10 bg-indigo-500 rounded-xl flex items-center justify-center shrink-0"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg> </div> <div class="flex-1 pt-1"> <h4 class="text-xs font-black uppercase tracking-widest text-indigo-400">Node Sync</h4> <p class="text-xs font-medium text-slate-300 mt-1">Cluster 4 authorized manifest distribution. Verified 100%.</p> </div> <button @click="visible = false" class="text-slate-500 hover:text-white transition-colors cursor-pointer shrink-0"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg> </button> </div> </div> <div x-show="!visible" class="fixed bottom-10 right-10"> <button @click="visible = true" class="px-6 py-3 bg-indigo-600 text-white rounded-2xl font-bold shadow-xl hover:bg-indigo-700 transition transform active:scale-95 cursor-pointer">Simulate Notification</button> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
