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

213

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

3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.8k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

2 months ago

401
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

1.7k
Hero simple
hero design simple

Author:
QQ-VVN

3 months ago

413
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.2k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

8.9k
test
test

Author:
Anonymous

1 month ago

93
Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

1 year ago

5.9k
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Design
by salvator

Author:
Baraka Salvator

2 months ago

371
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

2 months ago

379
Yoga Coach Hero Section

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

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components