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

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

11.1k
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.9k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

1 month ago

145
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

1 month ago

138
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

9 months ago

1.3k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

3.7k
strawbery
by salvator

Author:
Baraka Salvator

1 month ago

202
Drinkware 2

Author:
Maxim

3 months ago

523
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

9.2k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

11 months ago

2.1k
Heade With Hero Section

Author:
Abdul Baset Bappy

6 days ago

103
Brutalist Hero

Author:
threehymns

6 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components