Home
SHARIFUL ISLAM
Digital banking hero

Digital banking hero

Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

This tailwind example is contributed by SHARIFUL ISLAM, on 15-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Hero Landing Page

Author SHARIFUL ISLAM

1.8k

Fork Fullscreen

<div class="bg-gray-50 min-h-screen">
  
  <header class="w-full bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-6 flex items-center justify-between py-4">
      
      <div class="flex items-center space-x-2">
        <div class="w-6 h-6 bg-green-500 rounded-full"></div>
        <span class="text-lg font-semibold text-gray-800">Acorns</span>
      </div>
      
      <nav class="hidden md:flex space-x-6 text-gray-700">
        <a href="#" class="hover:text-gray-900">Invest</a>
        <a href="#" class="hover:text-gray-900">Later</a>
        <a href="#" class="hover:text-gray-900">Spend</a>
        <a href="#" class="hover:text-gray-900">Early</a>
        <a href="#" class="hover:text-gray-900">Earn</a>
        <a href="#" class="hover:text-gray-900">Grow</a>
        <a href="#" class="hover:text-gray-900">Pricing</a>
      </nav>
      
      <div class="flex items-center space-x-4">
        <a href="#" class="text-gray-700 hover:text-gray-900">Log in</a>
        <a
          href="#"
          class="px-4 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition"
        >
          Get started
        </a>
      </div>
    </div>
  </header>

<div class="max-w-7xl mx-auto px-6 py-12 grid md:grid-cols-2 gap-8 items-center">
    
    <div>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
        Acorns helps you <br /> grow your money
      </h1>
      <p class="text-gray-600 mb-6">
        Take control with all-in-one investment, retirement, checking, and more.
      </p>
      <a
        href="#"
        class="px-6 py-3 bg-green-500 text-white font-medium text-lg rounded-lg hover:bg-green-600 transition"
      >
        Get started
      </a>
    </div>

<div class="relative">
      <div class="absolute -left-8 -top-8 w-24 h-24 bg-green-100 rounded-full"></div>
      <img
        src="https://via.placeholder.com/300x400" 
        alt="Acorns Card"
        class="absolute -rotate-12 transform translate-y-6"
      />
      <img
        src="https://static-ssl.businessinsider.com/image/5be0ca3dda27f82a0016f894-1200/acorn.png" 
        alt="Acorns Mobile"
        class="relative z-10 mx-auto"
      />
    </div>
  </div>
</div>

Related Examples