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

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

2 years ago

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

4 months ago

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

Author:
saim-t8

1 month ago

301
No one
nice

Author:
Umutoniwase Yvette

4 months ago

253
yvette
is good

Author:
Umutoniwase Yvette

4 months ago

416
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:
Vernon Francis

1 year ago

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

6 months ago

1.5k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

5 months ago

637
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

8 months ago

1.7k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

4.5k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

4 months ago

805

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components