Home
Abigail
Hero section with bold heading

Hero section with bold heading

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

Hero

Author Abigail

11.4k

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

Magic Sound
by salvator

Author:
Baraka Salvator

3 months ago

528
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14.8k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

3 months ago

434
Standard Hero

Author:
Anonymous

1 year ago

3.5k
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

Author:
nii fanny

3 months ago

253
Hero Section

Author:
Gbenga Adegoke

2 years ago

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

Author:
VoltagedDev

1 year ago

1.6k
Hero component

Author:
Freja Jensen

2 years ago

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

Author:
SHARIFUL ISLAM

7 months ago

752
HERO

Author:
ABDO-SY

5 months ago

563
hero section

Author:
Anonymous

1 year ago

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

Author:
Cosimo Fazio

1 year ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components