Home
Anonymous
hero section

hero section

This tailwind example is contributed by Anonymous, on 10-Nov-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Anonymous

9.7k

Fork Fullscreen

<div class="items-center w-10/12 grid-cols-2 mx-auto overflow-x-hidden lg:grid md:py-14 lg:py-24 xl:py-14 lg:mt-3 xl:mt-5" data-aos="fade-right" data-aos-duration="800">
          <div class="pr-2 md:mb-14 py-14 md:py-0">
            <h1 class="text-3xl font-semibold text-blue-900 xl:text-5xl lg:text-3xl"><span class="block w-full">Get a financial experience</span> for growing your business!</h1>
            <p class="py-4 text-lg text-gray-500 2xl:py-8 md:py-6 2xl:pr-5">
              Empowering you to make better financial decisions, We truly are professional money planners...
            </p>
            <div class="mt-4">
              <a href="#contact" class="px-5 py-3 text-lg tracking-wider text-white bg-blue-500 rounded-lg md:px-8 hover:bg-blue-600 group"><span>Explore More</span> </a>
            </div>
          </div>
  
          <div class="pb-10 overflow-hidden md:p-10 lg:p-0 sm:pb-0">
            <img id="heroImg1" class="transition-all duration-300 ease-in-out hover:scale-105 lg:w-full sm:mx-auto sm:w-4/6 sm:pb-12 lg:pb-0" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/hero-img.png" alt="Awesome hero page image" width="500" height="488"/>
          </div>
        </div>

Related Examples

Basic hero section

Author:
Lîmåã M

2 years ago

16.4k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

31.9k
Hero section responsive

Author:
Samuel Dawson

2 years ago

15k
Hero block with image

Author:
Simon Scheffer

2 years ago

14.3k
Responsive hero section

Author:
Amit Pachange

2 years ago

15.5k
Hero banner

Author:
Piet Vriend

2 years ago

16.5k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.8k
Hero Section

Author:
Gbenga Adegoke

2 years ago

9.8k
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

2 years ago

10.1k
Simple hero example

Author:
Task Master

3 years ago

11k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.1k
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.

Author:
SHARIFUL ISLAM

8 months ago

869

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components