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

7.7k

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

2 years ago

9.5k
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.1k
Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.6k
Hero banner

Author:
Laurits

1 year ago

10.4k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 week ago

74
Beautiful Hero Section

Author:
Brandon D

2 years ago

11.9k
No distraction search field

Author:
_Amar_

1 year ago

9.9k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

7 months ago

4.2k
Hero example simply beautiful

Author:
Lucas Martinez

1 year ago

11.3k
Hero Section

Author:
Gbenga Adegoke

1 year ago

8.5k
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

5 months ago

2.3k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

3 months ago

550

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent