Home
Htmlwind
Hero section - Htmlwind

Hero section - Htmlwind

Simple centered hero section

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

Hero

Author Htmlwind

572

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>

Related Examples

Hero

Author:
Hasan AlDoy (McDoy)

9 months ago

1.4k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

11 months ago

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

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

1 year ago

4k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

5 months ago

804
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

4 months ago

857
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

1 year ago

2k
Portfolio Hero Section

Author:
KULDEEP

3 months ago

463
NFT Header with Hero

Author:
Abdul Baset Bappy

4 months ago

895
About Us

Author:
KULDEEP

4 months ago

594
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.7k
Zoo management
this a navigation bar and hero section of a zoo management system

Author:
ishimwe shadad

5 months ago

671
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

5 months ago

882

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components