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

11.9k

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_

2 years ago

12.2k
Hero template

Author:
Leon Bachmann

3 years ago

13.6k
Hero section responsive

Author:
Samuel Dawson

3 years ago

15.4k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Hero section with big heading

Author:
Leon Bachmann

3 years ago

12k
Hero section with fancy heading

Author:
Laurits

3 years ago

12.1k
Hero with description

Author:
Laurits

3 years ago

9.5k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

15.3k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

10.6k
Hero block with image

Author:
Simon Scheffer

3 years ago

14.7k
Inventory
management

Author:
Ramkesh Gupta

3 months ago

299
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components