Welcome to Cinema

The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

This tailwind example is contributed by Augustin, on 29-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Hero Heading

Author Augustin

Tailwind v3.4 1.3k 5

Fork Fullscreen

<section id="home" class="hero-bg min-h-screen flex items-center justify-center relative">
        <div class="spotlight top-1/4 left-1/4"></div>
        <div class="spotlight top-3/4 right-1/4" style="animation-delay: -4s;"></div>
        
        <div class="text-center z-10 max-w-4xl mx-auto px-6">
            <h1 class="text-7xl font-bold mb-6 glow-text floating-animation">
                Welcome to Cinema
            </h1>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                Discover the magic of movies - from Hollywood blockbusters to indie masterpieces, 
                explore the world of cinema like never before.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <button class="bg-gradient-to-r from-blue-600 to-purple-600 px-8 py-4 rounded-full font-semibold hover:scale-105 transform transition-all duration-300 shadow-lg hover:shadow-blue-500/25" onclick="showSection('genres')">
                    Explore Genres
                </button>
                <button class="border-2 border-white/30 px-8 py-4 rounded-full font-semibold hover:bg-white/10 transition-all duration-300" onclick="showSection('trending')">
                    What's Trending
                </button>
            </div>
        </div>
        
        
        <div class="absolute top-20 left-10 text-4xl floating-animation" style="animation-delay: -1s;">🎭</div>
        <div class="absolute bottom-20 right-10 text-4xl floating-animation" style="animation-delay: -3s;">🍿</div>
        <div class="absolute top-1/2 left-5 text-3xl floating-animation" style="animation-delay: -2s;">🎪</div>
    </section>

<section id="genres" class="py-20 bg-gray-800/50 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Movie Genres</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <div class="genre-card bg-gradient-to-br from-red-600 to-red-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Action')">
                    <div class="text-4xl mb-4">💥</div>
                    <h3 class="text-2xl font-bold mb-2">Action</h3>
                    <p class="text-red-100">High-octane thrills and explosive adventures</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-yellow-600 to-yellow-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Comedy')">
                    <div class="text-4xl mb-4">😂</div>
                    <h3 class="text-2xl font-bold mb-2">Comedy</h3>
                    <p class="text-yellow-100">Laughter and feel-good moments</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-blue-600 to-blue-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Drama')">
                    <div class="text-4xl mb-4">🎭</div>
                    <h3 class="text-2xl font-bold mb-2">Drama</h3>
                    <p class="text-blue-100">Emotional storytelling and character depth</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-purple-600 to-purple-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Sci-Fi')">
                    <div class="text-4xl mb-4">🚀</div>
                    <h3 class="text-2xl font-bold mb-2">Sci-Fi</h3>
                    <p class="text-purple-100">Future worlds and technological wonders</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-green-600 to-green-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Horror')">
                    <div class="text-4xl mb-4">👻</div>
                    <h3 class="text-2xl font-bold mb-2">Horror</h3>
                    <p class="text-green-100">Spine-chilling scares and supernatural tales</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-pink-600 to-pink-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Romance')">
                    <div class="text-4xl mb-4">💕</div>
                    <h3 class="text-2xl font-bold mb-2">Romance</h3>
                    <p class="text-pink-100">Love stories that touch the heart</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-indigo-600 to-indigo-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Animation')">
                    <div class="text-4xl mb-4">🎨</div>
                    <h3 class="text-2xl font-bold mb-2">Animation</h3>
                    <p class="text-indigo-100">Artistic storytelling through animation</p>
                </div>
                <div class="genre-card bg-gradient-to-br from-gray-600 to-gray-800 p-6 rounded-xl hover:scale-105 transition-transform cursor-pointer" onclick="showGenreMovies('Documentary')">
                    <div class="text-4xl mb-4">📽️</div>
                    <h3 class="text-2xl font-bold mb-2">Documentary</h3>
                    <p class="text-gray-100">Real stories and factual narratives</p>
                </div>
            </div>
        </div>
    </section>

<section id="trending" class="py-20 bg-gray-900 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Trending Now</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-blue-500 to-purple-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🦸‍♂️</div>
                    <h3 class="text-2xl font-bold mb-2">Superhero Epic</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★★</span>
                        <span class="ml-2 text-gray-400">9.2/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">A groundbreaking superhero adventure that redefines the genre.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Action</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Adventure</span>
                    </div>
                </div>
                
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-green-500 to-teal-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🌌</div>
                    <h3 class="text-2xl font-bold mb-2">Cosmic Journey</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★☆</span>
                        <span class="ml-2 text-gray-400">8.7/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">An interstellar adventure that explores the vastness of space.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Sci-Fi</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Drama</span>
                    </div>
                </div>
                
                <div class="movie-card rounded-xl p-6 hover:shadow-2xl transition-all duration-300">
                    <div class="bg-gradient-to-br from-red-500 to-orange-600 h-64 rounded-lg mb-4 flex items-center justify-center text-6xl">🎭</div>
                    <h3 class="text-2xl font-bold mb-2">The Artist's Tale</h3>
                    <div class="flex items-center mb-2">
                        <span class="rating-stars text-lg">★★★★★</span>
                        <span class="ml-2 text-gray-400">9.5/10</span>
                    </div>
                    <p class="text-gray-300 mb-4">A deeply moving drama about passion, sacrifice, and art.</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Drama</span>
                        <span class="genre-badge text-xs px-3 py-1 rounded-full">Biography</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="awards" class="py-20 bg-gradient-to-br from-yellow-900/20 to-yellow-800/20 hidden">
        <div class="container mx-auto px-6">
            <h2 class="text-5xl font-bold text-center mb-16 glow-text">Award Winners</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="text-center">
                    <div class="text-8xl mb-6">🏆</div>
                    <h3 class="text-3xl font-bold mb-4 text-yellow-400">Best Picture Winners</h3>
                    <div class="space-y-4">
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2024: Oppenheimer</h4>
                            <p class="text-gray-300">Christopher Nolan's biographical thriller</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2023: Everything Everywhere All at Once</h4>
                            <p class="text-gray-300">Mind-bending multiverse adventure</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">2022: CODA</h4>
                            <p class="text-gray-300">Coming-of-age deaf family drama</p>
                        </div>
                    </div>
                </div>
                
                <div class="text-center">
                    <div class="text-8xl mb-6">🎭</div>
                    <h3 class="text-3xl font-bold mb-4 text-yellow-400">International Recognition</h3>
                    <div class="space-y-4">
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">Palme d'Or 2024</h4>
                            <p class="text-gray-300">Cannes Film Festival's highest honor</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">BAFTA Winners</h4>
                            <p class="text-gray-300">British Academy's finest selections</p>
                        </div>
                        <div class="bg-black/30 p-4 rounded-lg">
                            <h4 class="text-xl font-semibold">Golden Globe Champions</h4>
                            <p class="text-gray-300">Hollywood Foreign Press favorites</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div id="movieModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50 flex items-center justify-center p-6">
        <div class="bg-gray-800 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-8">
                <div class="flex justify-between items-start mb-6">
                    <h3 id="modalTitle" class="text-3xl font-bold glow-text">Movie Title</h3>
                    <button onclick="closeModal()" class="text-gray-400 hover:text-white text-2xl">&times;</button>
                </div>
                <div id="modalContent" class="space-y-4">
                    
                </div>
            </div>
        </div>
    </div>

<footer class="bg-black py-12">
        <div class="container mx-auto px-6 text-center">
            <div class="film-strip w-full mb-6"></div>
            <p class="text-gray-400">© 2025 Cinema Explorer. Celebrating the magic of movies worldwide.</p>
            <div class="mt-4 text-2xl space-x-4">
                🎬 🍿 🎭 🎪 📽️
            </div>
        </div>
    </footer>

function closeModal() {
            document.getElementById('movieModal').classList.add('hidden');
        }

// Close modal when clicking outside
        document.getElementById('movieModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

// Add some interactive sparkle effects
        function createSparkle() {
            const sparkle = document.createElement('div');
            sparkle.style.position = 'fixed';
            sparkle.style.pointerEvents = 'none';
            sparkle.style.color = '#3b82f6';
            sparkle.style.fontSize = '20px';
            sparkle.style.zIndex = '1000';
            sparkle.textContent = '✨';
            sparkle.style.left = Math.random() * window.innerWidth + 'px';
            sparkle.style.top = Math.random() * window.innerHeight + 'px';
            sparkle.style.animation = 'float 3s ease-out forwards';
            
            document.body.appendChild(sparkle);
            
            setTimeout(() => {
                sparkle.remove();
            }, 3000);
        }

// Create sparkles periodically
        setInterval(createSparkle, 2000);

// Add keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });
    </script>

Related Examples

Hero Section
Home hero section search bar

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

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

2 years ago

5.2k
Yoga Coach Hero Section

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

2 years ago

6.7k
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

nii fanny

1 year ago

1.5k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

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

ABDO-SY

1 year ago

3.3k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Ijila Itunu

10 months ago

845
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

SHARIFUL ISLAM

1 year ago

1.9k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

24
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Vikram Choudhary

3 years ago

11.8k