Landing page hero section UI

Modern Hero Section Design

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action Hero

Author UI-Templates

Tailwind v3.4 1.5k 4

Fork Fullscreen

<main>
  <header class="w-full py-3 border-b bg-white dark:bg-gray-800">
  <div class="container mx-auto flex items-center justify-between ">
    
    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Futuristic UI</a>

<nav class="hidden lg:flex space-x-4 items-center">
      <a href="#" class="text-xs font-semibold text-gray-700 dark:text-white hover:text-gray-500">Homepage</a>
      <a href="#" class="text-xs font-semibold text-gray-700 dark:text-white hover:text-gray-500">About Us</a>
      <a href="#" class="text-xs font-semibold text-gray-700 dark:text-white hover:text-gray-500">Features</a>
      <a href="#" class="text-xs font-semibold text-gray-700 dark:text-white hover:text-gray-500">Blog</a>
      <a href="#" class="text-xs font-semibold text-gray-700 dark:text-white hover:text-gray-500">Contact Us</a>
    </nav>

<div class="hidden lg:flex space-x-4">
      <button class="text-sm py-1 px-3 border border-gray-800 text-gray-800 dark:text-white rounded-xl shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition">Demo</button>
      <button class="text-sm py-1 px-3 bg-black text-white rounded-xl shadow-lg hover:bg-gray-900 transition">Get Started</button>
    </div>

<button class="lg:hidden flex flex-col justify-between w-6 h-5">
      <span class="block h-1 w-full bg-gray-800 dark:bg-white rounded"></span>
      <span class="block h-1 w-full bg-gray-800 dark:bg-white rounded"></span>
      <span class="block h-1 w-full bg-gray-800 dark:bg-white rounded"></span>
    </button>
  </div>
</header>

<div class="h-screen flex items-center justify-items-center bg-gray-100 dark:bg-gray-800 relative z-20  overflow-hidden">
    <div  class="container mx-auto flex relative py-16">
      <div class="sm:w-3/6 lg:w-3/5 flex flex-col relative z-20"> 
  <h1 class="font-sans font-black font-semibold leading-snug text-gray-800 dark:text-white
             text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl">
    Welcome to the <br>
    <span class="font-light italic">
      innovation
    </span> oasis
  </h1>

<p class="text-xs sm:text-sm md:text-base lg:text-lg mt-4 sm:mt-6 text-gray-700 dark:text-white max-w-xs sm:max-w-sm md:max-w-sm lg:max-w-1/2">
  Step into our innovation oasis, where groundbreaking ideas bloom, and every click is a step into a world of
  endless possibilities.
</p>

<div class="flex flex-wrap mt-6 sm:mt-8 gap-4">
    <a href="#" class="py-2 px-4 sm:py-3 sm:px-6 rounded-xl shadow-lg bg-black border-2 border-transparent text-white text-xs sm:text-sm hover:bg-gray-700">
      Get Started
    </a>
    <a href="#" class="py-2 px-4 sm:py-3 sm:px-6 rounded-xl shadow-lg bg-transparent border-2 border-black hover:border-gray-700 text-black dark:text-white text-xs sm:text-sm hover:text-gray-700">
      Watch Demo
    </a>
  </div>
</div>

<div class="bg-gray-300 rounded-[40px] w-[250px] lg:w-[250px] p-6 shadow-xl translate-y-1 flex flex-col justify-end items-start">
  <p>
    <span class="text-5xl">$14B</span><br>
    <span class="text-sm opacity-80">Funds & Syndicates</span>
  </p>
</div>

<div class="bg-gray-400 rounded-[40px] w-[250px] lg:w-[250px] p-6 shadow-xl translate-y-4 lg:translate-y-4 flex flex-col justify-end items-start">
  <p>
    <span class="text-5xl">27k+</span><br>
    <span class="text-sm opacity-80">Raised by startups</span>
  </p>
</div>

<div class="bg-white rounded-[40px] overflow-hidden shadow-lg w-[250px] lg:w-[250px] translate-y-6">
      <img
        class="object-cover w-full h-48"
        src="https://images.pexels.com/photos/711009/pexels-photo-711009.jpeg"
        alt="City Image"
      />
    </div>
  </div>
</div>

</div>
  
  </div>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

</main>

Related Examples

Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15.1k
Product Page
Showcase for the product.

Prem..

4 years ago

34.8k
Hero section

Mohit Prajapati

4 years ago

12.9k
Hero section with call to action buttons

Prashant

4 years ago

15.9k
Hero section with image

Sophia Baker

3 years ago

14k
Minimalistic hero section

Sophia Baker

3 years ago

12k
Very simple hero

Laurits

3 years ago

9.7k
Hero section with button

Samuel Dawson

3 years ago

13.5k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.2k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

3 years ago

10.2k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

3.1k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

2 years ago

2.7k