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

617

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

Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

8 months ago

1.3k
BONIMATOR Game Portal
BONIMATOR Game Portal

Author:
Bonimater

2 months ago

152
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

1 month ago

269
Responsive Sidebar
Fully Responsive sidebar in both color modes light & dark with mini bar too.

Author:
AKASH GANDHAR

1 year ago

8.2k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

9 months ago

1.9k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

11.6k
Features Component

Author:
KULDEEP

4 months ago

593
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

4 months ago

479
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21k
Hero Section
Home hero section search bar

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

1 year ago

7.6k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

8 months ago

1.2k
Video Player
Youtube Video Player

Author:
KULDEEP

4 months ago

420

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components