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 Snap Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-black min-h-screen flex items-center justify-center p-4 md:p-8"> <div class="w-full max-w-3xl"> <h2 class="text-white font-bold text-2xl mb-6 px-2">Scroll Snap Carousel</h2> <!-- Scroll Snap Container --> <div class="flex overflow-x-auto snap-x snap-mandatory gap-6 pb-8 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-white/5 [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-white/40"> <!-- Item 1 --> <div class="snap-center shrink-0 w-80 h-96 bg-gradient-to-br from-violet-600 to-indigo-600 rounded-2xl shadow-2xl flex items-center justify-center text-white text-3xl font-bold shadow-indigo-600/20">1</div> <!-- Item 2 --> <div class="snap-center shrink-0 w-80 h-96 bg-gradient-to-br from-fuchsia-600 to-pink-600 rounded-2xl shadow-2xl flex items-center justify-center text-white text-3xl font-bold shadow-pink-600/20">2</div> <!-- Item 3 --> <div class="snap-center shrink-0 w-80 h-96 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-2xl shadow-2xl flex items-center justify-center text-white text-3xl font-bold shadow-teal-500/20">3</div> <!-- Item 4 --> <div class="snap-center shrink-0 w-80 h-96 bg-gradient-to-br from-amber-500 to-orange-500 rounded-2xl shadow-2xl flex items-center justify-center text-white text-3xl font-bold shadow-orange-500/20">4</div> <!-- Item 5 --> <div class="snap-center shrink-0 w-80 h-96 bg-gradient-to-br from-rose-500 to-red-500 rounded-2xl shadow-2xl flex items-center justify-center text-white text-3xl font-bold shadow-rose-500/20">5</div> </div> <p class="text-slate-400 text-center mt-2 text-sm max-w-md mx-auto">Swipe horizontally. Each card snaps perfectly into the center of the viewport.</p> </div> </div> </body> </html>
