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

562

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

5 months ago

647
gallary
html , css

Author:
Hacker Development

5 months ago

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

Author:
ORGIN_DREAMS

5 months ago

856
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Material 3 Drawer (Responsive) [Light]
A sidebar drawer that conforms to Google's Material 3 design guidelines. Static sidebar when the screen is >=lg. Collapses into a drawer when the screen is <lg.

Author:
Nick Girga

5 months ago

865
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

11 months ago

1.5k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

6 months ago

315
home
html , css

Author:
Hacker Development

5 months ago

956
Nature Hero

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

1.8k
Notification
Dev Community Notification Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.6k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

5 months ago

804
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

60.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components