Home
Code Master(Mfuranziza Dusabe Hamza)
Next-Gen Hero Section – Tailwind CSS Component

Next-Gen Hero Section – Tailwind CSS Component

A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Header Product Badge Range Slider

Author Code Master(Mfuranziza Dusabe Hamza)

886

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Agasobanuye Films - Watch and Enjoy Translated Movies" />
  <title>Agasobanuye Films</title>
   <title>Acode master</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes logo-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.2); opacity: 0.8; }
    }

@keyframes cinematic-glow {
      0% { text-shadow: 0 0 10px #ffdd40; }
      50% { text-shadow: 0 0 25px #ffdd40, 0 0 15px #ffdd40; }
      100% { text-shadow: 0 0 10px #ffdd40; }
    }

.animate-cinematic-glow {
      animation: cinematic-glow 2s ease-in-out infinite;
    }

.movie-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.movie-card:hover {
      transform: translateY(-10px) rotateX(10deg);
      box-shadow: 0 25px 50px -12px rgba(255, 215, 0, 0.3);
    }

.gradient-text {
      background: linear-gradient(45deg, #ff6b6b, #ffd93d);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

.parallax {
      transform: translateZ(0);
      will-change: transform;
    }

.floating {
      animation: float 6s ease-in-out infinite;
    }

@keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

.loading-spinner {
      animation: spin 1.5s linear infinite;
    }

@keyframes spin {
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<div class="fixed inset-0 z-0 opacity-20">
    <div class="absolute w-1 h-1 bg-white rounded-full animate-ping" style="top: 20%; left: 30%"></div>
    <div class="absolute w-1 h-1 bg-yellow-500 rounded-full animate-ping" style="top: 60%; left: 70%"></div>
    <div class="absolute w-1 h-1 bg-purple-500 rounded-full animate-ping" style="top: 80%; left: 40%"></div>
  </div>

<nav class="w-full max-w-7xl mx-auto flex items-center justify-between py-4 px-6 border-b border-indigo-600/30 shadow-lg shadow-indigo-700/20 sticky top-0 bg-black/80 backdrop-blur-sm z-20">
    <a href="#" class="flex space-x-1 items-center text-xl font-extrabold">
      <span class="gradient-text animate-cinematic-glow text-3xl">AGASOBANUYE FILMS</span>
    </a>
    <div class="flex space-x-6">
      <a href="#movies" class="hover:text-yellow-400 transition-colors relative group">
        Movies
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-yellow-400 transition-all group-hover:w-full"></span>
      </a>
      <a href="#about" class="hover:text-yellow-400 transition-colors relative group">
        About
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-yellow-400 transition-all group-hover:w-full"></span>
      </a>
      <a href="#contact" class="hover:text-yellow-400 transition-colors relative group">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-yellow-400 transition-all group-hover:w-full"></span>
      </a>
    </div>
  </nav>

<main class="max-w-6xl mx-auto px-6 mt-24 pb-20 flex flex-col lg:flex-row gap-10 justify-between items-center relative z-10">
    <section class="flex-1 space-y-6">
      <h1 class="text-6xl font-extrabold gradient-text floating">Experience Cinema Magic</h1>
      <p class="text-lg text-indigo-300 max-w-xl leading-relaxed">
        Immerse yourself in world-class movies translated to Kinyarwanda with perfect synchronization and cultural adaptation.
      </p>

<div class="flex space-x-4">
        <a href="#movies" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 font-bold rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:scale-105">
          Explore Library
        </a>
      </div>
    </section>

<section id="movies" class="py-20 px-6 bg-black/30 relative z-10">
    <div class="max-w-7xl mx-auto">
      <h2 class="text-4xl font-bold gradient-text mb-12 text-center">Featured Movies</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <div class="movie-card group relative bg-gray-900 rounded-xl p-6 transform transition-all duration-300 hover:z-10">
          <div class="relative overflow-hidden rounded-lg">
            <img src="https://sdmntprnorthcentralus.oaiusercontent.com/files/00000000-cf38-622f-be42-285ddd1b3c7d/raw?se=2025-05-23T22%3A22%3A00Z&sp=r&sv=2024-08-04&sr=b&scid=a5a9df94-a7a3-584b-9af1-c5e32bd8716c&skoid=bbd22fc4-f881-4ea4-b2f3-c12033cf6a8b&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2025-05-23T21%3A21%3A08Z&ske=2025-05-24T21%3A21%3A08Z&sks=b&skv=2024-08-04&sig=6dMZ7p8gOrByx0bdVjW5s0jX6e8gUYeLpcPqYMLV5is%3D" 
                 alt="Movie" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
          </div>
          <h3 class="text-xl font-bold mt-4">Action Adventure</h3>
          <p class="text-gray-400 mt-2">Experience heart-pounding action translated for maximum excitement</p>
        </div>
        
        
      </div>
    </div>
  </section>

// Parallax effect
    document.addEventListener('mousemove', (e) => {
      const parallaxElements = document.querySelectorAll('.parallax');
      parallaxElements.forEach(element => {
        const speed = 0.02;
        const x = (window.innerWidth - e.pageX * speed) / 100;
        const y = (window.innerHeight - e.pageY * speed) / 100;
        element.style.transform = `translate(${x}px, ${y}px)`;
      });
    });
  </script>
</body>
</html>

Related Examples

PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

713
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

512
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

749
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

5 months ago

1.2k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

1.2k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

143
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

3 weeks ago

423
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

5 months ago

1k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

7 months ago

1.7k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.7k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.3k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

1 week ago

113

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components