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 23-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)

851

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="Acode Master - Full-stack Wizard and Code Ninja Portfolio" />
  <title>Acode Master Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes ping-delay {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.25);
        opacity: 0.5;
      }
    }

.ping-delay-1 { animation: ping-delay 1.9s linear infinite; }
    .ping-delay-2 { animation: ping-delay 2s linear infinite; }
    .ping-delay-3 { animation: ping-delay 2.1s linear infinite; }
    .ping-delay-4 { animation: ping-delay 2.2s linear infinite; }
    .ping-delay-5 { animation: ping-delay 2.3s linear infinite; }
    .ping-delay-6 { animation: ping-delay 2.4s linear infinite; }
  </style>
</head>

<ul class="hidden md:flex space-x-8 text-lg font-semibold border-x border-indigo-800 px-10 cursor-pointer select-none" role="menubar">
      <li role="menuitem" tabindex="0" class="border-b-4 border-indigo-500 pb-1">Home</li>
      <li role="menuitem" tabindex="0" class="hover:border-b-4 hover:border-indigo-500 pb-1 transition-all">What I Do</li>
      <li role="menuitem" tabindex="0" class="hover:border-b-4 hover:border-indigo-500 pb-1 transition-all">About Me</li>
      <li role="menuitem" tabindex="0" class="hover:border-b-4 hover:border-indigo-500 pb-1 transition-all">Pricing</li>
    </ul>

<div class="hidden md:flex">
      <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrHeNw--Eb4kqnS6ASZxChC7IGggWR-BWh4Q&s" class="relative overflow-hidden rounded-md bg-indigo-600 px-6 py-2 font-bold text-white shadow-md group focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-1 hover:bg-indigo-700 transition-colors duration-300">
        <span class="absolute inset-0 bg-white opacity-20 -skew-x-12 -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></span>
        <span class="relative z-10">Let's Build Magic</span>
      </a>
    </div>

<ul id="mobile-nav" class="hidden flex-col md:hidden space-y-3 bg-gradient-to-b from-indigo-900 to-black rounded-b shadow shadow-indigo-700 text-indigo-300 font-semibold max-w-screen-sm mx-auto mt-2 px-6 py-4 select-none">
    <li class="p-2 rounded hover:shadow hover:shadow-indigo-700 cursor-pointer">Home</li>
    <li class="p-2 rounded hover:shadow hover:shadow-indigo-700 cursor-pointer">What I Do</li>
    <li class="p-2 rounded hover:shadow hover:shadow-indigo-700 cursor-pointer">About Me</li>
    <li class="p-2 rounded hover:shadow hover:shadow-indigo-700 cursor-pointer">Pricing</li>
    <li class="p-2 rounded hover:shadow hover:shadow-indigo-700 cursor-pointer">
      <a href="#main-image" class="relative overflow-hidden rounded-md bg-indigo-600 px-6 py-2 font-bold text-white shadow-md group block text-center hover:bg-indigo-700 transition-colors duration-300">
        <span class="absolute inset-0 bg-white opacity-20 -skew-x-12 -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></span>
        <span class="relative z-10">Let's Build Magic</span>
      </a>
    </li>
  </ul>

<main class="max-w-7xl mx-auto px-6 md:px-0 mt-12 md:mt-24 pb-20 flex flex-col-reverse lg:flex-row gap-10 justify-between items-center text-white">
    <section class="flex-1 space-y-6">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">Hey! I’m</h1>
      <h2 class="text-5xl md:text-6xl lg:text-7xl font-extrabold text-indigo-400 leading-tight tracking-wide">Acode Master</h2>
      <p class="text-md sm:text-lg text-indigo-300 max-w-xl">
        Full-stack wizard crafting blazing fast apps and killer digital experiences.<br />
        5+ years slaying bugs and building sleek solutions with Laravel, NestJS & Nuxt.js.
      </p>

<div class="flex space-x-4">
        <a href="mailto:acode.master@example.com" class="relative overflow-hidden rounded-md bg-indigo-600 px-6 py-2 font-bold text-white shadow-md group focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-1 hover:bg-indigo-700 transition-colors duration-300">
          <span class="absolute inset-0 bg-white opacity-20 -skew-x-12 -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></span>
          <span class="relative z-10">Hire Me</span>
        </a>
        <button class="relative overflow-hidden rounded-md border border-indigo-500 px-6 py-2 font-bold text-indigo-400 bg-transparent group hover:bg-indigo-600 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-1">
          <span class="absolute inset-0 bg-indigo-600 -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></span>
          <span class="relative z-10">Explore My Work</span>
        </button>
      </div>

<div class="flex space-x-10 text-indigo-300 mt-6 max-w-xl">
        <div class="text-center">
          <p class="text-3xl font-bold">5+</p>
          <p class="text-sm">Years Experience</p>
        </div>
        <div class="text-center">
          <p class="text-3xl font-bold">50+</p>
          <p class="text-sm">Projects Delivered</p>
        </div>
        <div class="text-center">
          <p class="text-3xl font-bold">10k+</p>
          <p class="text-sm">Lines of Code</p>
        </div>
      </div>
    </section>

navOpen.addEventListener('click', () => {
      mobileNav.classList.remove('hidden');
      navOpen.classList.add('hidden');
      navClose.classList.remove('hidden');
    });

navClose.addEventListener('click', () => {
      mobileNav.classList.add('hidden');
      navOpen.classList.remove('hidden');
      navClose.classList.add('hidden');
    });

const darkToggle = document.getElementById('dark-mode-toggle');
    darkToggle.addEventListener('click', () => {
      document.body.classList.toggle('bg-black');
      document.body.classList.toggle('bg-gradient-to-br');
      document.body.classList.toggle('text-white');
    });
  </script>
</body>

</html>

Related Examples

Product grid

Author:
ariaw

2 months ago

103
NFT Header with Hero

Author:
Abdul Baset Bappy

6 months ago

1k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

7 months ago

638
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.9k
Creative Hero Section

Author:
Ijila Itunu

7 months ago

1.3k
Product card

Author:
Anum Shahana

1 year ago

1.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

6 months ago

1.6k
Hero Section
Home hero section search bar

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

1 year ago

7.6k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.6k
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

6 months ago

960
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

10 months ago

1.9k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

2 months ago

277

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components