Home
Emdadul Islam
Hero Section

Hero Section

A 2 column responsive hero section

This tailwind example is contributed by Emdadul Islam, on 03-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Header Banner

Author Emdadul Islam

2.7k

Fork Fullscreen

<div class="md:mx-auto md:container px-4 dark:bg-gray-900">
    <div class="pt-10 md:pt-40">
        <div class="container mx-auto">
            <div class="flex flex-wrap items-center pb-12">
                <div class="md:w-1/2 lg:w-2/3 w-full xl:pr-20 md:pr-6">
                    <div class="py-2 text-color">
                        <h1 role="heading"
                            class="text-2xl dark:text-white  lg:text-6xl md:leading-snug tracking-tighter f-f-l font-black">
                           Discover the Wonders of Nature</h1>
                        <p role="contentinfo"
                            class="text-md dark:text-white lg:text-3xl lg:leading-7 md:leading-10 f-f-r py-4 md:py-8">
                           Join us on an immersive journey through the most breathtaking landscapes, diverse ecosystems, and incredible wildlife. Whether you're a nature enthusiast, a budding photographer, or simply seeking tranquility, our website offers a treasure trove of resources and inspiration to help you deepen your connection with the great outdoors. Dive into our stunning galleries, insightful articles, and community events to experience the beauty and importance of nature like never before.
                    </div>
                </div>
                <div class="lg:w-1/3 md:w-1/2 w-full relative h-96 flex items-end justify-center">
                    <img class="absolute w-full h-full inset-0 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1716902536193-ae684074e634?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A girl enjoying in sunlight" role="img" />
                    <div class="relative z-10 bg-white rounded shadow p-6 w-10/12 -mb-20">
                        <div class="flex items-center justify-between w-full sm:w-full mb-8">
                           <h2 class="text-2xl font-serif font-bold text-green-600">
                            Explore, Learn, and Connect with the Natural World

</h2>

</div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Promotional sticky top section

Author:
Leon Bachmann

3 years ago

12.5k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

7 months ago

1.3k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

4 months ago

451
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

4.3k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

932
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.2k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.9k
Header with svg background

Author:
R.P Ketan

2 years ago

13.6k
Transparent Navbar

Author:
Rajesh Maheshwari

9 months ago

1.9k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

9 months ago

2k
Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

10.1k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

6 months ago

929

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components