side bar

html css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Masonry, Image grid,drawer,Front page

Image gallery Sidebar Landing Page

Author Hacker Development

976

Fork Fullscreen

./.<style>
        .carousel-container {
            perspective: 1000px;
            touch-action: pan-y pinch-zoom;
        }

.carousel-track {
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

.carousel-item {
            backface-visibility: hidden;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

.carousel-item.active {
            opacity: 1;
            transform: scale(1) translateZ(0);
        }

@media (max-width: 640px) {
            .carousel-item.prev {
                opacity: 0;
                transform: scale(0.8) translateX(-50%) translateZ(-100px);
            }

.carousel-item.next {
                opacity: 0;
                transform: scale(0.8) translateX(50%) translateZ(-100px);
            }
        }

@media (min-width: 641px) {
            .carousel-item.prev {
                opacity: 0.7;
                transform: scale(0.9) translateX(-100%) translateZ(-100px);
            }

.carousel-item.next {
                opacity: 0.7;
                transform: scale(0.9) translateX(100%) translateZ(-100px);
            }
        }

.carousel-item.hidden {
            opacity: 0;
            transform: scale(0.8) translateZ(-200px);
        }

.nav-button {
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

@media (hover: hover) {
            .nav-button:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: scale(1.1);
            }
        }

.nav-button:active {
            transform: scale(0.95);
        }

.progress-bar {
            transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
    </style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center overflow-hidden p-4 sm:p-8">
    
    <div class="fixed inset-0 -z-10">
        <div class="absolute inset-0 bg-gradient-to-br from-violet-900/20 via-purple-900/20 to-fuchsia-900/20"></div>
        <div class="absolute top-1/4 left-1/4 w-48 h-48 sm:w-96 sm:h-96 bg-violet-500/10 rounded-full filter blur-3xl"></div>
        <div class="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-96 sm:h-96 bg-fuchsia-500/10 rounded-full filter blur-3xl"></div>
    </div>

<div class="w-full max-w-6xl mx-auto">
        
        <div class="carousel-container relative">
            
            <div class="absolute top-0 left-0 right-0 h-1 bg-white/10 rounded-full overflow-hidden z-20">
                <div class="progress-bar absolute top-0 left-0 h-full w-1/3 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
            </div>

<button class="nav-button absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center z-20 text-white touch-manipulation" onclick="prevSlide()" title="Previous slide">
                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>
            
            <button class="nav-button absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center z-20 text-white touch-manipulation" onclick="nextSlide()" title="Next slide">
                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>

<div class="carousel-track relative h-[400px] sm:h-[500px] md:h-[600px] overflow-hidden">
                
                <div class="carousel-item active absolute top-0 left-0 w-full h-full">
                    <div class="w-full h-full p-4 sm:p-8">
                        <div class="w-full h-full rounded-xl sm:rounded-2xl overflow-hidden relative group">
                            <img src="https://images.unsplash.com/photo-1515462277126-2dd0c162007a?auto=format&fit=crop&q=80" alt="Geometric art installation" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                            <div class="absolute inset-0 bg-gradient-to-br from-violet-500/40 to-purple-500/40 mix-blend-overlay"></div>
                            <div class="absolute inset-x-0 bottom-0 p-4 sm:p-8 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
                                <h3 class="text-white text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-3">Digital Prism!###</h3>
                                <p class="text-gray-200 text-sm sm:text-base md:text-lg max-w-2xl">Where geometry meets art in a stunning display of light and form.</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="carousel-item next absolute top-0 left-0 w-full h-full">
                    <div class="w-full h-full p-4 sm:p-8">
                        <div class="w-full h-full rounded-xl sm:rounded-2xl overflow-hidden relative group">
                            <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80" alt="Futuristic tech setup" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                            <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-500/40 to-pink-500/40 mix-blend-overlay"></div>
                            <div class="absolute inset-x-0 bottom-0 p-4 sm:p-8 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
                                <h3 class="text-white text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-3">Tech Haven!##</h3>
                                <p class="text-gray-200 text-sm sm:text-base md:text-lg max-w-2xl">Immerse yourself in the cutting edge of technology and innovation.</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="carousel-item hidden absolute top-0 left-0 w-full h-full">
                    <div class="w-full h-full p-4 sm:p-8">
                        <div class="w-full h-full rounded-xl sm:rounded-2xl overflow-hidden relative group">
                            <img src="https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?auto=format&fit=crop&q=80" alt="Abstract digital art" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                            <div class="absolute inset-0 bg-gradient-to-br from-pink-500/40 to-rose-500/40 mix-blend-overlay"></div>
                            <div class="absolute inset-x-0 bottom-0 p-4 sm:p-8 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
                                <h3 class="text-white text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-3">Neural Dreams!#</h3>
                                <p class="text-gray-200 text-sm sm:text-base md:text-lg max-w-2xl">AI-generated masterpieces that blur the line between human and machine creativity.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="absolute bottom-2 sm:bottom-4 left-1/2 -translate-x-1/2 flex gap-1 sm:gap-2 z-20">
                <button class="w-8 sm:w-12 h-1 sm:h-1.5 rounded-full bg-white/40 hover:bg-white/60 transition-colors" title="Go to slide 1"></button>
                <button class="w-8 sm:w-12 h-1 sm:h-1.5 rounded-full bg-white/20 hover:bg-white/60 transition-colors" title="Go to slide 2"></button>
                <button class="w-8 sm:w-12 h-1 sm:h-1.5 rounded-full bg-white/20 hover:bg-white/60 transition-colors" title="Go to slide 3"></button>
            </div>
        </div>
    </div>

// Add touch events for swipe
        carousel.addEventListener('touchstart', e => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

carousel.addEventListener('touchend', e => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;

if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    nextSlide();
                } else {
                    prevSlide();
                }
            }
        }

// Update indicators
            indicators.forEach((indicator, index) => {
                indicator.className = `w-8 sm:w-12 h-1 sm:h-1.5 rounded-full transition-colors ${
                    index === currentSlide ? 'bg-white/40' : 'bg-white/20'
                } hover:bg-white/60`;
            });

// Update progress bar
            progressBar.style.width = `${((currentSlide + 1) / slides.length) * 100}%`;
        }

function resetAutoAdvance() {
            clearInterval(autoAdvanceTimer);
            autoAdvanceTimer = setInterval(nextSlide, 3000);
        }

function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlides();
            resetAutoAdvance();
        }

function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            updateSlides();
            resetAutoAdvance();
        }

// Add click handlers to indicators
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                currentSlide = index;
                updateSlides();
                resetAutoAdvance();
            });
        });

// Initialize auto advance
        resetAutoAdvance();

// Initialize slides
        updateSlides();
    </script>
</body>
</html>

Related Examples

gallary
html , css

Author:
Hacker Development

8 months ago

734
gallary
html , css

Author:
Hacker Development

8 months ago

547
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

8 months ago

1.1k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

3 months ago

596
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.6k
ChaiCode
ChaiCode

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

995
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

3 months ago

194
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1k
Product Landing Page

Author:
Noob

3 years ago

12.8k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

373
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 weeks ago

52
sidebar

Author:
Abhishek Kumar

4 months ago

429

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components