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 Notification Banner</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen antialiased" x-data="{ visible: true }"> <div x-show="visible" class="bg-indigo-600 border-b border-indigo-500 py-3 px-10 relative overflow-hidden" style="display: none;" > <!-- Background accents --> <div class="absolute inset-0 opacity-10"> <div class="absolute -left-10 top-0 h-24 w-24 bg-white rounded-full blur-3xl"></div> <div class="absolute right-0 bottom-0 h-24 w-24 bg-white rounded-full blur-3xl"></div> </div> <div class="relative flex items-center justify-center gap-6"> <p class="text-xs font-black text-white uppercase tracking-[0.2em] italic">Architectural Engine v4.2 Deployment in Progress.</p> <a href="#" class="px-4 py-1.5 bg-white text-indigo-600 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 hover:text-white transition shadow-lg">Learn More</a> <button @click="visible = false" class="absolute right-0 text-indigo-200 hover:text-white transition-colors cursor-pointer"> <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="M6 18L18 6M6 6l12 12" /></svg> </button> </div> </div> <div x-show="!visible" class="p-10 text-center"> <button @click="visible = true" class="text-[10px] font-black text-indigo-600 uppercase tracking-widest hover:underline cursor-pointer">Restore Top Banner</button> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
