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 Sticky Sidebar</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-50 min-h-[200vh]"> <div class="max-w-7xl mx-auto px-6 py-12"> <div class="flex flex-col lg:flex-row gap-12"> <!-- Main Content --> <main class="lg:w-2/3 order-2 lg:order-1"> <h1 class="text-5xl font-black text-slate-900 mb-8 tracking-tight">Sticky Sidebar Insight</h1> <article class="prose lg:prose-xl text-slate-600 space-y-8"> <p class="text-xl leading-relaxed">Scroll down to see the sidebar stick in place as you move through the article content. This technique is perfect for secondary navigation, ad placements, or table of contents.</p> <div class="h-64 bg-white rounded-3xl border border-slate-200"></div> <p class="leading-relaxed">Traditional layouts often leave massive empty spaces as the user scrolls down long articles. By using <code class="bg-slate-100 px-2 py-1 rounded">sticky</code>, we can keep valuable information or actions within the user's viewport at all times.</p> <div class="h-96 bg-white rounded-3xl border border-slate-200"></div> <p class="leading-relaxed">Remember that for sticky to work, the parent container must not have <code class="bg-slate-100 px-2 py-1 rounded">overflow: hidden</code> and must be taller than the sticky element itself.</p> <div class="h-64 bg-white rounded-3xl border border-slate-200"></div> </article> </main> <!-- Sticky Sidebar --> <aside class="lg:w-1/3 order-1 lg:order-2"> <div class="sticky top-12 space-y-8"> <!-- Card 1 --> <div class="bg-indigo-600 rounded-3xl p-8 text-white shadow-2xl shadow-indigo-100"> <h3 class="text-xl font-black mb-4 underline decoration-indigo-400 decoration-4 underline-offset-8">Table of Contents</h3> <ul class="space-y-4 font-bold text-sm text-indigo-100"> <li class="hover:text-white transition cursor-pointer">1. Introduction</li> <li class="hover:text-white transition cursor-pointer">2. Core Principles</li> <li class="hover:text-white transition cursor-pointer">3. Practical Application</li> <li class="hover:text-white transition cursor-pointer">4. Future Trends</li> </ul> </div> <!-- Card 2 --> <div class="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm"> <h3 class="text-sm font-black text-slate-800 uppercase tracking-widest mb-6 border-b pb-4">Latest Updates</h3> <div class="space-y-6"> <div> <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">March 08, 2026</p> <p class="text-sm font-bold text-slate-700 leading-tight">New algorithm updates revealed.</p> </div> <div> <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">March 04, 2026</p> <p class="text-sm font-bold text-slate-700 leading-tight">Exploring future of AI design.</p> </div> </div> </div> </div> </aside> </div> </div> </body> </html>
