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

8.2k

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

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

10.4k
Hero with video background

Author:
farisubuntu

6 months ago

1.1k
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

1 month ago

185
Hero template

Author:
Leon Bachmann

2 years ago

11.9k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

5 months ago

964
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

2 weeks ago

145
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

11 months ago

1.6k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

9.7k
Hero section for website

Author:
Anonymous

6 months ago

1.1k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

8 months ago

1.3k
Hero banner

Author:
Laurits

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components