Hero section with bold heading

This tailwind example is contributed by Abigail, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Abigail

Tailwind v3.4 12.2k 9

Fork Fullscreen

<div class="xl:max-w-screen-xl pt-6 md:pt-12 pb-6 lg:pb-10 mx-auto px-6 sm:px-6 md:px-8 lg:px-12 xl:pt-24">
    <h1 class="text-3xl md:text-4xl lg:text-6xl xl:text-7xl font-bold mb-6 text-gray-900">
        Eco-Friendly Reusable Silicone Food Storage Bags
    </h1>
    <div class="prose prose-lg lg:prose-xl xl:prose-2xl">
        These reusable silicone food storage bags are a must-have for
        anyone looking to reduce their environmental impact and save money in the long run.
    </div>
    <div class="flex gap-4 flex-wrap my-4 md:mt-8">
        <a href="#"
            class="bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-150 text-base text-white px-4 lg:px-8 py-4 inline-block font-bold rounded-md shadow-xl">Start
            Browse
        </a>

<a href=""
            class="bg-white hover:bg-yellow-200 text-base text-indigo-600 px-4 lg:px-8 py-4 inline-block font-bold rounded-md shadow-xl transition ease-in-out duration-150">
            Our impact
        </a>
    </div>
    <a href="" class="font-semibold mt-6 inline-block text-lg lg:text-xl text-indigo-600 hover:underline"><span
            class="hidden sm:inline">Discover our key features. »</span>
        <span class="inline sm:hidden">Learn more »</span>
    </a>
</div>

Related Examples

Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
Hero block with image

Simon Scheffer

3 years ago

15.9k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Vikas Kushwah

1 year ago

2.7k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Vikram Choudhary

3 years ago

11.8k
Beautiful Hero Section

Brandon D

4 years ago

16.2k
Modern SAAS HERO Section
A hero section for your SAAS application

Emdadul Islam

2 years ago

3.5k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Gianluca Secondo

1 year ago

2.2k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

SHARIFUL ISLAM

1 year ago

1.9k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Hezron Okoko

2 years ago

3.7k
animated hero

Crimson

1 year ago

4.5k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.1k