Hero section - Htmlwind

Simple centered hero section

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Htmlwind

Tailwind v3.4 1.6k 2

Fork Fullscreen

<!-- const mobileMenuButton = document.getElementById("open-menu");
const closeMenuButton = document.getElementById("close-menu");
const mobileMenu = document.getElementById("mobile-menu");
const backdrop = document.getElementById("backdrop");

// Ensure the mobile menu and backdrop are hidden on load
if (mobileMenu) mobileMenu.classList.add("hidden");
if (backdrop) backdrop.classList.add("hidden");

// Function to open the mobile menu
function openMenu() {
  if (mobileMenu) {
    mobileMenu.classList.remove("hidden");
    mobileMenu.setAttribute("aria-hidden", "false");
  }
  if (backdrop) {
    backdrop.classList.remove("hidden");
    backdrop.setAttribute("aria-hidden", "false");
  }
  closeMenuButton.focus(); // Focus the close button for better accessibility
}

// Function to close the mobile menu
function closeMenu() {
  if (mobileMenu) {
    mobileMenu.classList.add("hidden");
    mobileMenu.setAttribute("aria-hidden", "true");
  }
  if (backdrop) {
    backdrop.classList.add("hidden");
    backdrop.setAttribute("aria-hidden", "true");
  }
  mobileMenuButton.focus(); // Return focus to the open button
}

// Event listeners for opening and closing the menu
if (mobileMenuButton) {
  mobileMenuButton.addEventListener("click", openMenu);
}
if (closeMenuButton) {
  closeMenuButton.addEventListener("click", closeMenu);
}
if (backdrop) {
  backdrop.addEventListener("click", closeMenu); // Close the menu when clicking on the backdrop
}

// Handle keyboard accessibility (ESC to close menu)
document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeMenu();
  }
}); -->

<div class="bg-white">
  <header class="absolute inset-x-0 top-0 z-50 py-4 lg:py-5">
    <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
      <div class="flex lg:flex-1">
        <a href="#" class="-m-1.5 p-1.5">
          <span class="sr-only">Your Company</span>
          <img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
        </a>
      </div>
      <div class="lg:hidden">
        <button id="open-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
          <span class="sr-only">Open main menu</span>
          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex lg:gap-x-8">
        <a href="#" class="text-sm font-semibold leading-6 text-gray-700">Features</a>
        <a href="#" class="text-sm font-semibold leading-6 text-gray-700">Services</a>
        <a href="#" class="text-sm font-semibold leading-6 text-gray-700">Pricing</a>
        <a href="#" class="text-sm font-semibold leading-6 text-gray-700">About</a>
      </div>
      <div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-x-3">
        <a href="#" class="inline-block rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
        <a href="#" class="inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
      </div>
    </nav>
    <div id="mobile-menu" class="lg:hidden" role="dialog" aria-modal="true">
      <div id="backdrop" class="fixed inset-0 z-50"></div>
      <div class="fixed inset-0 z-50 w-full bg-white sm:left-auto sm:right-0 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
        <div class="flex items-center justify-between px-6 py-4">
          <a href="#" class="-m-1.5 p-1.5">
            <span class="sr-only">Your Company</span>
            <img class="h-8 w-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-accent-283.svg" alt="" />
          </a>
          <button id="close-menu" type="button" class="-m-2.5 flex items-center justify-center rounded-lg p-2.5 text-gray-700">
            <span class="sr-only">Close menu</span>
            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M19 5L4.99998 19M5.00001 5L19 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
        </div>
        <div class="divide-y divide-gray-900/10 px-6">
          <div class="space-y-0.5 py-5">
            <a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
            <a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Services</a>
            <a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Pricing</a>
            <a href="#" class="-mx-3 block rounded-lg px-4 py-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">About</a>
          </div>
          <div class="space-y-3 py-6">
            <a href="#" class="block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign up</a>
            <a href="#" class="block rounded-md bg-white px-3.5 py-2.5 text-center text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-900">Login</a>
          </div>
        </div>
      </div>
    </div>
  </header>

<div class="relative isolate overflow-hidden pt-12 lg:pt-16">
    <div aria-hidden="true" class="absolute -top-[40rem] left-1/2 -z-10 h-[80rem] w-[80rem] -translate-x-1/2 rounded-full bg-[image:linear-gradient(to_right,_#e2e8f0_1px,_transparent_1px),_linear-gradient(to_bottom,_#e2e8f0_1px,_transparent_1px)] bg-[length:70px_70px] [mask-image:radial-gradient(circle,#000_10%,transparent_70%)]"></div>
    <div class="px-6 lg:px-8">
      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
          <div class="relative flex items-center justify-center gap-3 rounded-lg bg-white p-1 pr-2.5 text-sm font-medium leading-6 text-gray-600 shadow-sm ring-1 ring-gray-900/10 hover:bg-gray-50">
            <span class="inline-block rounded-md bg-white px-2 ring-1 ring-inset ring-gray-900/10">New release</span>
            <a href="#" class="inline-flex items-center justify-center gap-1">
              <span class="absolute inset-0" aria-hidden="true"></span>
              Explore our latest features
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="sm:text-center">
          <h1 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">Achieve more with less effort</h1>
          <p class="mt-6 text-lg leading-8 text-gray-600">Simplify your workflows and automate daily tasks with ease, saving time to focus on what matters most for your business.</p>
        </div>
        <div class="mt-10 flex items-center justify-start gap-6 sm:justify-center">
          <a href="#" class="inline-flex items-center justify-center gap-2 rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" />
              <path d="M10.9 8.8L10.6577 8.66152C10.1418 8.36676 9.5 8.73922 9.5 9.33333L9.5 14.6667C9.5 15.2608 10.1418 15.6332 10.6577 15.3385L10.9 15.2L15.1 12.8C15.719 12.4463 15.719 11.5537 15.1 11.2L10.9 8.8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            Demo
          </a>
          <a href="#" class="text-sm font-semibold leading-6 text-gray-900">Learn more</a>
        </div>
      </div>
    </div>
  </div>
</div>