Home
Samuel Abera
Hero Section

Hero Section

Home hero section search bar

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

Header Hero Search Bar Heading Landing Page

Author Samuel Abera

4.5k

Fork Fullscreen

<section class="w-full">
    <div class="w-full h-[520px] bg-[url('https://images.unsplash.com/photo-1449844908441-8829872d2607?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxob21lfGVufDB8MHx8fDE3MTA0MDE1NDZ8MA&ixlib=rb-4.0.3&q=80&w=1080')] bg-cover bg-no-repeat bg-center flex flex-col justify-center items-center ">
    
        <div>
            <h1 class="text-white text-center xl:text-5xl lg:text-4xl md:text-3xl sm:text-2xl xs:text-xl font-semibold bg-gray-800 p-2 bg-opacity-40 rounded-sm">Discover Your New Home</h1>
        </div>
        <div class="w-full mx-auto">
            <form>
                <div class="xl:w-1/2 lg:w-[60%] md:w-[70%] sm:w-[70%] xs:w-[90%] mx-auto flex gap-2 md:mt-6 xs:mt-4 mx-4">
                    <input type="text" class="border border-gray-400 w-full p-2 rounded-md text-xl pl-2"
                            placeholder="" />
                    <button type="submit" class="px-[10px] p-[10px] bg-blue-500 text-lg text-white rounded-md font-semibold">Search</button>
                </div>
            </form>
        </div>
    </div>
</section>

Related Examples

No distraction search field

Author:
_Amar_

1 year ago

10.1k
Hero

Author:
Aman kumar

10 months ago

4.5k
Background image section

Author:
Charlotte Dupont

1 year ago

16k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.7k
header

Author:
alex_bel

8 months ago

2.1k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

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

7 months ago

7.4k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

6 months ago

2.5k
Yoga Coach Hero Section

Author:
Samuel Abera

6 months ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components