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

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

11.2k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.8k
Hero template

Author:
Leon Bachmann

2 years ago

11.9k
Hero section responsive

Author:
Samuel Dawson

2 years ago

13.9k
Hero section with big heading

Author:
Leon Bachmann

2 years ago

10.7k
Hero section with fancy heading

Author:
Laurits

2 years ago

11.1k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14k
Hero with description

Author:
Laurits

2 years ago

8.8k
Hero block with image

Author:
Simon Scheffer

2 years ago

12.7k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

9.7k
Product Page
Showcase for the product.

Author:
muhamadrofii911

8 months ago

1.6k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

10 months ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components