omerlinkStream

This tailwind example is contributed by Omer fils ELENGA, on 04-Jan-2026. Component is made with Tailwind v3.4. It is responsive.

Card Carousel Hero Comment Section Navbar Range Slider

Author Omer fils ELENGA

Tailwind v3.4 1.2k 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OmerlinkStream</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        /* --- STYLE GLOBAL --- */
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #000; /* Fond noir pour le cinema */
            color: #fff;
            overflow: hidden; /* Empêcher le scroll body natif pour faire notre propre scroll */
        }

/* --- SCROLL SNAP (Effet Application) --- */
        #app-container {
            height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
            position: relative;
            z-index: 10;
        }

/* Masquer la barre de défilement native */
        #app-container::-webkit-scrollbar {
            display: none;
        }
        #app-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

.stream-section {
            height: 100vh;
            width: 100vw;
            scroll-snap-align: start;
            position: relative;
            overflow: hidden;
        }

/* --- VISUALISEUR AUDIO (Petites barres qui bougent) --- */
        .bar {
            width: 3px;
            background: white;
            animation: equalize 1s infinite;
        }
        @keyframes equalize {
            0% { height: 10px; }
            50% { height: 25px; }
            100% { height: 10px; }
        }
        .bar:nth-child(2) { animation-delay: 0.1s; }
        .bar:nth-child(3) { animation-delay: 0.2s; }
        .bar:nth-child(4) { animation-delay: 0.3s; }
        
        .paused .bar {
            animation-play-state: paused;
            height: 10px;
        }

/* --- INTERFACE UTILISATEUR --- */
        .glass-nav {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

.progress-line {
            transition: width 0.1s linear;
        }

/* Transition opacity pour changement de contenu */
        .fade-enter {
            animation: fadeIn 0.6s ease-out forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(1.05); }
            to { opacity: 1; transform: scale(1); }
        }
    </style>
</head>
<body>

<nav class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="navbar">
        <div class="max-w-[1500px] mx-auto flex justify-between items-center py-4 px-6">
            
            <div class="flex items-center gap-2 cursor-pointer group">
                <div class="w-8 h-8 bg-white text-black font-bold flex items-center justify-center rounded group-hover:bg-gray-200 transition">O</div>
                <div class="text-xl font-bold tracking-tight">omerlink<span class="text-gray-400">Stream</span></div>
            </div>

<div class="hidden md:flex gap-8 text-sm font-medium text-gray-300">
                <a href="#" class="text-white">Stream</a>
                <a href="#" class="hover:text-white transition">Live</a>
                <a href="#" class="hover:text-white transition">Podcast</a>
                <a href="#" class="hover:text-white transition">Library</a>
            </div>

<div class="flex items-center gap-4">
                <button class="hidden md:block px-4 py-2 text-xs font-semibold text-white border border-gray-600 rounded-full hover:bg-white hover:text-black transition">Log In</button>
                <button class="bg-white text-black px-4 py-2 rounded-full text-xs font-bold hover:scale-105 transition">Go Pro</button>
            </div>
        </div>
    </nav>

<main id="app-container">
        
        
        <section class="stream-section" data-id="1">
            
            <img src="https://images.unsplash.com/photo-1493225255756-d9584f8606e9?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            
            
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-pink-500 font-bold tracking-widest uppercase text-xs mb-2">Featured</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Music <br> Festival</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6 line-clamp-2">
                        Discover the best electro and pop hits from this summer's festival lineup. Immerse yourself in the sound.
                    </p>
                    <div class="flex items-center gap-4">
                        <button class="flex items-center gap-2 bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition" onclick="togglePlay(this)">
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> Watch Now
                        </button>
                        <button class="w-12 h-12 rounded-full border border-white/50 flex items-center justify-center hover:bg-white/20 transition">
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        </section>

<section class="stream-section" data-id="2">
            <img src="https://images.unsplash.com/photo-1478720568477-152d9b164e63?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-blue-400 font-bold tracking-widest uppercase text-xs mb-2">Tech</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Future <br> Reality</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6">
                        Exploring the boundaries of VR and AR. How the metaverse will reshape our daily lives.
                    </p>
                </div>
            </div>
        </section>

<section class="stream-section" data-id="3">
            <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=2500&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent"></div>
            <div class="absolute inset-0 flex flex-col justify-end pb-24 px-6 md:px-20 max-w-5xl mx-auto w-full">
                <div class="fade-enter">
                    <h2 class="text-green-500 font-bold tracking-widest uppercase text-xs mb-2">Travel</h2>
                    <h1 class="text-5xl md:text-8xl font-black mb-4 leading-none tracking-tighter uppercase">Mountain <br> Life</h1>
                    <p class="text-gray-300 max-w-lg text-sm md:text-base mb-6">
                        The highest peaks, the deepest silence. Join us on a journey to the roof of the world.
                    </p>
                </div>
            </div>
        </section>

</main>

<footer id="player-bar" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 w-[90%] md:w-[600px] bg-white/10 backdrop-blur-xl border border-white/20 rounded-full px-6 py-3 flex items-center justify-between z-50 transition-transform duration-300 translate-y-32 opacity-0">
        
        
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gray-800 rounded overflow-hidden">
                <img src="https://via.placeholder.com/100" id="player-img" class="w-full h-full object-cover opacity-80">
            </div>
            <div class="flex flex-col">
                <span id="player-title" class="text-sm font-bold text-white leading-tight">Loading...</span>
                <span id="player-author" class="text-xs text-gray-400">Artist</span>
            </div>
        </div>

<div class="flex items-center gap-6">
            <button class="text-white hover:text-gray-300"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
            
            <button id="global-play-btn" class="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center hover:scale-110 transition">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
            
            <button class="text-white hover:text-gray-300"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></button>
        </div>

<div class="flex items-center gap-1 h-5" id="visualizer">
            <div class="bar h-3"></div>
            <div class="bar h-4"></div>
            <div class="bar h-2"></div>
            <div class="bar h-5"></div>
        </div>
    </footer>

<div class="fixed right-6 top-1/2 transform -translate-y-1/2 flex flex-col gap-2 z-40">
        <div class="w-1 h-16 bg-gray-600 rounded-full overflow-hidden relative">
            <div id="scroll-progress" class="absolute top-0 left-0 w-full bg-white transition-all duration-300" style="height: 0%"></div>
        </div>
    </div>

<div class="fixed right-10 bottom-32 z-40 hidden md:flex flex-col gap-4">
        <button onclick="scrollToSection('prev')" class="w-12 h-12 bg-white/10 backdrop-blur rounded-full flex items-center justify-center hover:bg-white text-white hover:text-black transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
        </button>
        <button onclick="scrollToSection('next')" class="w-12 h-12 bg-white/10 backdrop-blur rounded-full flex items-center justify-center hover:bg-white text-white hover:text-black transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </button>
    </div>

let currentSectionIndex = 0;
        let isPlaying = false;
        const app = document.getElementById('app-container');
        const sections = document.querySelectorAll('.stream-section');
        const playerBar = document.getElementById('player-bar');
        const scrollProgress = document.getElementById('scroll-progress');
        const navbar = document.getElementById('navbar');

// --- OBSERVER (Détecte quelle section est visible) ---
        const observerOptions = {
            root: app,
            threshold: 0.6 // 60% visible = actif
        };

sections.forEach(section => observer.observe(section));

// --- LOGIQUE DE LECTEUR ---
        function activeStream(index) {
            currentSectionIndex = index;
            
            // Mise à jour de la barre de scroll droite
            const progress = ((index + 1) / sections.length) * 100;
            scrollProgress.style.height = `${progress}%`;

// Mise à jour des données du player
            const data = streamData[index] || streamData[0];
            document.getElementById('player-title').innerText = data.title;
            document.getElementById('player-author').innerText = data.author;
            document.getElementById('player-img').src = data.img;

// Afficher le player
            playerBar.classList.remove('translate-y-32', 'opacity-0');

// Si on était déjà en lecture, on continue (simulé)
            if (isPlaying) {
                startPlayerAnim();
            }
        }

// --- CONTROLES ---
        function togglePlay(btn) {
            isPlaying = !isPlaying;
            updatePlayBtn();
            if (isPlaying) {
                startPlayerAnim();
                // Zoom léger sur le background image
                const img = sections[currentSectionIndex].querySelector('img');
                img.style.transform = "scale(1.1)";
                img.style.transition = "transform 10s ease";
            } else {
                stopPlayerAnim();
                const img = sections[currentSectionIndex].querySelector('img');
                img.style.transform = "scale(1)";
            }
        }

document.getElementById('global-play-btn').addEventListener('click', function() {
            togglePlay(this);
        });

function startPlayerAnim() {
            // Ici tu connecterais ta vraie logique audio
            // Pour l'instant, on active juste l'animation CSS
        }

function stopPlayerAnim() {
            // Stop audio
        }

function scrollToSection(direction) {
            const newIndex = direction === 'next' ? currentSectionIndex + 1 : currentSectionIndex - 1;
            
            if (newIndex >= 0 && newIndex < sections.length) {
                sections[newIndex].scrollIntoView({ behavior: 'smooth' });
            }
        }

// --- NAVBAR VISIBILITY ON SCROLL ---
        app.addEventListener('scroll', () => {
            if (app.scrollTop > 100) {
                navbar.classList.add('-translate-y-full');
            } else {
                navbar.classList.remove('-translate-y-full');
            }
        });

// --- INITIALISATION ---
        // Démarrer sur le premier stream
        window.onload = () => {
             activeStream(0);
        }

</script>
</body>
</html>

Related Examples

Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.5k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k
Food App Web design

Aitrik Saha

1 year ago

2.5k