Home
Samuel Abera
Yoga Coach Hero Section

Yoga Coach Hero Section

This tailwind example is contributed by Samuel Abera, on 29-May-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Header Hero Heading

Author Samuel Abera

3.2k

Fork Fullscreen

<div class="hidden md:flex md:items-center md:w-auto w-full" id="menu">
            <nav>
                <ul class="md:flex items-center justify-between text-base text-gray-600 pt-4 md:pt-0">
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Home</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Services</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">About Us</a></li>
                    <li><a class="md:p-4 py-3 px-0 block md:mb-0 mb-2" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div class="w-[90%] mx-auto h-full flex items-center justify-between py-10">
        <div class="lg:w-fit">
            <div
                class="sm:text-6xl xs:text-5xl text-left text-white font-serif font-extrabold uppercase">
                <h1>Get</h1>
                <h1>in</h1>
                <h1 class="bg-black/30 text-white rounded-sm px-1 shadow-sm shadow-white/50">Health</h1>
                <h1>Today</h1>
            </div>
            <div class="w-full flex items-center justify-between mt-6 py-1 px-4 uppercase bg-green-500 rounded-sm">
                <h3 class="text-white text-lg font-semibold">join now</h3>
                <div class="w-[40%] flex items-center text-gray-700 text-4xl gap-0">
                    <hr class="w-full border border-gray-700 relative -right-3" />
                    <ion-icon name="chevron-forward"></ion-icon>
                </div>
            </div>
            <p class="text-md text-white bg-black/30 font-semibold mt-1 capitalize rounded-lg p-2">25% Discount on first
                month</p>
        </div>

Related Examples

Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.7k
Header with svg background

Author:
R.P Ketan

1 year ago

12.1k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

9.3k
Hero

Author:
Aman kumar

10 months ago

4.5k
Hero Section
Home hero section search bar

Author:
Samuel Abera

9 months ago

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

Author:
Samuel Abera

8 months ago

2.5k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

6 months ago

2.4k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

6 months ago

4.4k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

4 months ago

2.1k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

4 months ago

644
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

4 months ago

758
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 month ago

100

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components