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

9.9k

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

12.5k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

26.9k
Basic hero section

Author:
Lîmåã M

1 year ago

15k
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.4k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.5k
Hero section with fancy heading

Author:
Laurits

2 years ago

10.9k
Beautiful Hero Section

Author:
Brandon D

2 years ago

13.4k
Hero section with youtube video preview

Author:
Piet Vriend

1 year ago

10.8k
Hero Section

Author:
Gbenga Adegoke

2 years ago

9k
hero section

Author:
Anonymous

1 year ago

8.4k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

8 months ago

1.3k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

9 months ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components