Home
Vikram Choudhary
A hero component

A hero component

It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

This tailwind example is contributed by Vikram Choudhary, on 02-Oct-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Vikram Choudhary

6.9k

Fork Fullscreen

<div class="bg-gradient-to-b from-purple-50 to-pink-50">
    <div class="mx-auto max-w-5xl px-6 py-10 text-center md:px-12 md:py-16">
        <h1 class="text-3xl leading-[52px] font-semibold md:text-4xl lg:text-5xl">Discover the power of
            <span class="bg-purple-600 text-white p-0.5 rounded-lg">creative inspiration</span> online<br>
            <div class="sm:mt-2">
                <span class="underline decoration-purple-600 underline-offset-4">
                    Explore a world of design
                    possibilities
                </span>
            </div>
        </h1>
        <p class="mt-4 text-lg font-medium leading-2 text-gray-600 md:text-xl">Unleash your creativity with access
            to a
            vast collection of website screenshots, code snippets, and more at UI Shots.</p>
        <div class="mt-8 flex justify-center gap-2">
            <a href="/pages">
                <button
                    class="text-md rounded-lg bg-gradient-to-br from-purple-500 to-purple-700 px-4 py-[10px] font-semibold text-white hover:bg-gradient-to-tl hover:from-purple-500 hover:to-purple-700 ">
                    <div class="flex items-center justify-center">
                        <div class=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                fill="currentColor" viewBox="0 0 256 256">
                                <path
                                    d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z">
                                </path>
                            </svg>
                        </div>Browse Inspiration | 1000+
                    </div>
                </button>
            </a>
        </div>
    </div>
</div>

Related Examples

Hero section with big heading

Author:
Leon Bachmann

1 year ago

8.1k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

9 months ago

7.3k
Hero Section
I created a unique and dynamic hero section using TailwindCSS and HTML5. The design features an animated gradient background that smoothly transitions colors, creating a visually appealing backdrop. Additionally, animated blurry blobs add a fluid and modern touch. The centered content includes a bold welcome message, a brief description, and a clear call-to-action button, all styled for responsiveness and a seamless user experience.

Author:
zobaidul kaziex

3 weeks ago

279
Hero section
Hero section for your project

Author:
Prajwal Hallale

1 year ago

8.3k
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 month ago

400
Hero section with call to action buttons

Author:
Prashant

1 year ago

10.4k
Hero section with image

Author:
Sophia Baker

1 year ago

9k
Hero component

Author:
Freja Jensen

1 year ago

10.2k
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

8 months ago

5.6k
Hero block with image

Author:
Simon Scheffer

1 year ago

10.1k
Hero Beer

Author:
Samuel Abera

3 weeks ago

438
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

1 month ago

465

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent