Home
Task Master
Simple hero example

Simple hero example

This tailwind example is contributed by Task Master, on 05-Nov-2022. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Task Master

10.3k

Fork Fullscreen

<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
    <div
        class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Welcome to simple blog
        </h1>
        <p class="mb-8 leading-relaxed">Here's where I put my thoughts</p>
        <div class="flex justify-center">
            <a href=""
                class="inline-flex text-white bg-blue-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded text-lg">Read</a>
            <a href=""
                class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">About
                me</a>
        </div>
    </div>
    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
        <img class="object-cover object-center rounded" alt="hero" src="https://www.svgrepo.com/show/358718/logo-windows.svg">
    </div>
</div>

Related Examples

Hero block with image

Author:
Simon Scheffer

2 years ago

13.6k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

29.2k
Basic hero section

Author:
Lîmåã M

2 years ago

15.8k
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

1 year ago

7.9k
Responsive hero section

Author:
Amit Pachange

2 years ago

14.3k
Hero section with fancy heading

Author:
Laurits

2 years ago

11.3k
Beautiful Hero Section

Author:
Brandon D

2 years ago

14.2k
Hero section with youtube video preview

Author:
Piet Vriend

2 years ago

11.3k
Hero Section

Author:
Gbenga Adegoke

2 years ago

9.5k
hero section

Author:
Anonymous

1 year ago

9.1k
new potifolio
How to Build a Powerful Web Developer Portfolio (With Examples!)

Author:
Augustin

4 weeks ago

266
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

4 months ago

934

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components