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

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

onlinee
examination

Author:
Nezerwa Debora

9 months ago

676
super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

9 months ago

1k
heroimage
svg and hero image, basic html code

Author:
Anonymous

8 months ago

713
work hard
by salvator

Author:
Baraka Salvator

9 months ago

483
Very simple hero

Author:
Laurits

3 years ago

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

Author:
SHARIFUL ISLAM

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 year ago

2.1k
Minimalistic Hero Section with Radial Gradient for E-Commerce
This hero section features a modern radial gradient background where the center remains white and fades into a soft blue at the edges. Designed for an e-commerce website, it provides a clean, elegant, and visually appealing layout with a bold headline, a call-to-action button, and a seamless user experience. The responsive design ensures a great appearance on all screen sizes.

Author:
SHARIFUL ISLAM

1 year ago

1.7k
walve style by omerlink
walve style by omerlink

Author:
Omer fils ELENGA

1 month ago

131
login form
this login form it will be used for sign in to every website

Author:
nii fanny

9 months ago

538
Tool Box
by salvator

Author:
Baraka Salvator

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components