Managing Finance Hero

Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

This tailwind example is contributed by SHARIFUL ISLAM, on 15-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Hero

Author SHARIFUL ISLAM

Tailwind v3.4 1.9k 6

Fork Fullscreen

<div class="min-h-screen bg-white">
  
  <header class="w-full">
    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
      
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 bg-purple-500 rounded-full"></div>
        <span class="text-xl font-semibold text-gray-900">easy finances</span>
      </div>
      
      <nav class="hidden md:flex space-x-8 text-gray-700 font-medium">
        <a href="#" class="hover:text-gray-900">How it works</a>
        <a href="#" class="hover:text-gray-900">Technology</a>
        <a href="#" class="hover:text-gray-900">Price</a>
      </nav>
      
      <a
        href="#"
        class="hidden md:inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-lg font-medium hover:bg-purple-200 transition"
      >
        Start for Free
      </a>
    </div>
  </header>

<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 items-center gap-10 pt-12">
    
    <div>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
        Make managing <br />
        your finances <span class="text-purple-500">easier</span> <br />
        with AI
      </h1>
      <p class="text-gray-600 mt-4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="mt-6 flex items-center space-x-4">
        <a
          href="#"
          class="px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition"
        >
          Get Started
        </a>
        <a
          href="#"
          class="px-6 py-3 flex items-center border border-gray-300 rounded-lg font-medium text-gray-700 hover:bg-gray-100 transition"
        >
          <span>See Demo</span>
        </a>
      </div>
    </div>

<div class="relative">
      
      <div class="absolute w-40 h-40 bg-yellow-200 rounded-lg top-10 -left-10"></div>
      <div class="absolute w-20 h-20 bg-purple-300 rounded-full top-20 left-32"></div>
      <div class="absolute w-12 h-12 border border-gray-300 rounded-full bottom-10 left-16"></div>
      <div class="absolute w-10 h-10 bg-blue-200 rounded-full bottom-20 right-16"></div>
      
      <img
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6v93uCXnFSRc57Og2PVYOSinP-OfIhyKqQQ&s"
        alt="Finance Illustration"
        class="relative z-10 mx-auto"
      />
    </div>
  </div>
</div>