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

A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

ORGIN_DREAMS

1 year ago

1.8k
Game changer
by salvator

Baraka Salvator

1 year ago

1.5k
Minimalist Hero Section
A minimal but nice hero section.

VoltagedDev

2 years ago

2.5k
Standard Hero

Anonymous

2 years ago

4.7k
Single Page Portfolio

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

1 year ago

3.2k
Hero Section

Muzammil Riaz

2 months ago

193
Landi page template
con un cuerpo libre

Raul antonio de la cruz hernandez

8 months ago

910
Typical SAAS hero section

Eamon Carter

3 years ago

9.7k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
AI SaaS Hero Section with Dashboard
A modern AI SaaS hero section built with HTML and Tailwind CSS featuring dashboard preview, CTA buttons, trust badges, responsive layout, and clean UI.

JUGENDRA GANGWAR

2 months ago

211