Home
TailwindFlex
Hero section with search

Hero section with search

This tailwind example is contributed by TailwindFlex, on 09-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author TailwindFlex

10.6k

Fork Fullscreen

<div class="dark:bg-gray-800">
    <div class="dark:bg-transparent">
        <div class="mx-auto flex flex-col items-center py-12 sm:py-24">
            <div class="w-11/12 sm:w-2/3 lg:flex justify-center items-center flex-col mb-5 sm:mb-10">
                <h1
                    class="text-4xl sm:text-5xl md:text-5xl lg:text-5xl xl:text-6xl text-center text-gray-800 dark:text-white font-black leading-10">
                    Let's not stress for
                    <span class="text-violet-800 dark:text-violet-500">Website</span>
                    designs.
                </h1>
                <p class="mt-5 sm:mt-10 lg:w-10/12 text-gray-600 dark:text-gray-300 font-normal text-center text-xl">
                    A Community build tailwind component library.
                </p>
            </div>
            <div class="flex w-11/12 md:w-8/12 xl:w-6/12">
                <div class="flex rounded-md w-full">
                    <input type="text" name="q"
                        class="w-full p-3 rounded-md rounded-r-none border border-2 border-gray-300 placeholder-current dark:bg-gray-500  dark:text-gray-300 dark:border-none "
                        placeholder="keyword" />
                    <button
                        class="inline-flex items-center gap-2 bg-violet-700 text-white text-lg font-semibold py-3 px-6 rounded-r-md">
                        <span>Find</span>
                        <svg class="text-gray-200 h-5 w-5 p-0 fill-current" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
                            viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
                            xml:space="preserve">
                            <path
                                d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
                        </svg>
                </button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

No distraction search field

Author:
_Amar_

1 year ago

11k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.8k
Hero template

Author:
Leon Bachmann

2 years ago

11.7k
Hero section responsive

Author:
Samuel Dawson

2 years ago

13.8k
Hero section with big heading

Author:
Leon Bachmann

2 years ago

10.5k
Hero section with fancy heading

Author:
Laurits

2 years ago

10.9k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

13.9k
Hero with description

Author:
Laurits

2 years ago

8.7k
Hero block with image

Author:
Simon Scheffer

2 years ago

12.6k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

9.6k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 month ago

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

Author:
Samuel Abera

9 months ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components