Home
OmKar Mehta
Clean hero section

Clean hero section

This tailwind example is contributed by OmKar Mehta, on 04-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author OmKar Mehta

3.3k

Fork Fullscreen

<div
    class="px-7 lg:px-10 max-w-6xl mx-auto flex flex-col gap-y-10 lg:flex-row items-center gap-x-10 justify-center py-10 lg:py-14 dark:bg-gray-800">
    <div class="lg:w-[650px] lg:px-5 flex flex-col gap-y-5">
        <h1
            class="text-4xl md:text-5xl xl:text-[50px] leading-[1.2] md:max-w-xl md:mx-auto md:text-center lg:text-left lg:mx-0 lg:max-w-full font-semibold dark:text-white">
            Discover the power of streamlined services
        </h1>
        <p class="text-sm md:max-w-xl md:mx-auto lg:mx-0 lg:max-w-full md:text-center lg:text-left dark:text-gray-300">
            With
            efficient services available online, you can simplify your tasks and save valuable time.</p>
        <div class="flex gap-x-5 flex-col gap-y-2.5 lg:flex-row">
            <a href="#"
                class="flex w-full lg:w-fit items-center text-white justify-center rounded-lg bg-[#1053F3] px-6 py-2.5 font-semibold hover:shadow-lg hover:drop-shadow transition duration-200"><span>Get
                    started
                </span>
            </a>
            <a href="#"
                class="flex w-full lg:w-fit items-center text-[#1053F3] justify-center rounded-lg border border-[#6A65FF] px-6 py-2.5 font-semibold hover:shadow-lg hover:drop-shadow transition duration-200 bg-[#5138EE]/10 dark:text-white dark:bg-transparent dark:border-gray-500/50"><span>Learn
                    more
                </span>
            </a>
        </div>
    </div>
    <div class="hero-image md:px-5 lg:px-0 w-full lg:w-1/2 rounded-3xl md:pt-2 lg:pt-0 relative isolate z-10">
        <img class="rounded-3xl w-full"
            src="https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8c2VydmljZXxlbnwwfDB8fHwxNzEyMjIyNjQ3fDA&ixlib=rb-4.0.3&q=80&w=1080"
            alt="">
    </div>
</div>

Related Examples

Hero section with search

Author:
TailwindFlex

3 years ago

11.7k
Inventory
management

Author:
Ramkesh Gupta

2 months ago

287
Login_Form
help to logging in

Author:
ineza aime stella

7 months ago

511
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

4.3k
About Us

Author:
KULDEEP

6 months ago

879
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14.4k
No distraction search field

Author:
_Amar_

2 years ago

12.1k
Hero section

Author:
iamlos

9 months ago

1.4k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

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

Author:
Dipti narayan

2 years ago

10.1k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

864
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

7 months ago

955

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components