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 Scroll To Top Button</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </head> <body class="bg-gray-50 flex justify-center items-end min-h-[300vh] pb-12 p-6 antialiased" x-data="{ show: false }" @scroll.window="show = (window.pageYOffset > 400)"> <!-- Scroll To Top Component --> <div class="fixed bottom-10 right-10 z-50" x-show="show" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-10" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-10" style="display: none;"> <button @click="window.scrollTo({top: 0, behavior: 'smooth'})" class="h-16 w-16 bg-slate-900 text-white rounded-2xl flex items-center justify-center shadow-2xl shadow-slate-900/40 hover:bg-indigo-600 hover:-translate-y-2 transition-all duration-300 group cursor-pointer border border-white/10"> <svg class="h-6 w-6 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7 7 7M12 3v18" /> </svg> <!-- Tooltip --> <span class="absolute -top-12 left-1/2 -translate-x-1/2 px-3 py-1.5 bg-slate-800 text-white text-[9px] font-black uppercase tracking-widest rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">Apex Scroll</span> </button> </div> <div class="max-w-xl text-center space-y-4 opacity-20"> <h2 class="text-3xl font-black text-slate-900 uppercase tracking-tighter">Spectral Terminal Hub</h2> <p>Scroll down to visualize the utility activation sequence.</p> </div> </body> </html>
