Home
Abdul Baset Bappy
App Hero Section

App Hero Section

This tailwind example is contributed by Abdul Baset Bappy, on 08-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Abdul Baset Bappy

556

Fork Fullscreen

<div class="hidden lg:flex lg:ml-16 lg:items-center lg:justify-center lg:space-x-10">
                    <div class="flex items-center space-x-12">
                        <a href="#" title="" class="text-base font-medium text-gray-900 transition-all duration-200 rounded focus:outline-none font-pj hover:text-opacity-50 focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"> Features </a>

<a href="#" title="" class="text-base font-medium text-gray-900 transition-all duration-200 rounded focus:outline-none font-pj hover:text-opacity-50 focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"> Pricing </a>

<a
                        href="#"
                        title=""
                        class="px-5 py-2 text-base font-semibold leading-7 text-gray-900 transition-all duration-200 bg-transparent border border-gray-900 rounded-xl font-pj focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 hover:bg-gray-900 hover:text-white focus:bg-gray-900 focus:text-white"
                        role="button"
                    >
                        Create free account
                    </a>
                </div>
            </div>
        </div>
    </header>

<section class="relative py-12 sm:py-16 lg:pt-20 lg:pb-36">
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
            <div class="grid grid-cols-1 gap-y-8 lg:items-center lg:grid-cols-2 sm:gap-y-20 xl:grid-cols-5">
                <div class="text-center xl:col-span-2 lg:text-left md:px-16 lg:px-0">
                    <div class="max-w-sm mx-auto sm:max-w-md md:max-w-full">
                        <h1 class="text-4xl font-bold leading-tight text-gray-900 sm:text-5xl sm:leading-tight lg:text-6xl lg:leading-tight font-pj">Get meaningful feedbacks on your code</h1>

<p class="mt-4 text-lg text-gray-900 lg:mt-0 lg:ml-4 font-pj">Join with <span class="font-bold">4600+ Developers</span> and start getting feedbacks right now</p>
                        </div>
                    </div>

<div class="mt-8 sm:flex sm:items-center sm:justify-center lg:justify-start sm:space-x-5 lg:mt-12">
                        <a
                            href="#"
                            title=""
                            class="inline-flex items-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 border border-transparent rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 font-pj justif-center hover:bg-gray-600"
                            role="button"
                        >
                            Get feedback
                        </a>

<a
                            href="#"
                            title=""
                            class="inline-flex items-center px-4 py-4 mt-4 text-lg font-bold transition-all duration-200 bg-transparent border border-transparent sm:mt-0 font-pj justif-center rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 hover:bg-gray-200 focus:bg-gray-200"
                            role="button"
                        >
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            Download iOS App
                        </a>
                    </div>
                </div>

Related Examples

A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

9 months ago

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

1 year ago

2.2k
animated hero

Author:
Crimson

10 months ago

2.7k
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Author:
Augustin

5 months ago

746
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

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

5 months ago

1k
Modern page
hero page by salvator

Author:
Baraka Salvator

5 months ago

940
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

5 months ago

880
modern portifolio
by salvator

Author:
Baraka Salvator

5 months ago

599
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.6k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

7 months ago

1.7k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

19.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components