DEV Community

Cover image for React Tailwind CSS Hero Section Example
saim
saim

Posted on • Originally published at larainfo.com

7

React Tailwind CSS Hero Section Example

In this tutorial, we will create hero section in react js with tailwind css. We will see simple hero section react, responsive hero section with image examples with Tailwind CSS & React.

Tool Use

React JS
Tailwind CSS 3.v

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

Simple hero section using tailwind react.



import React from "react";

export default function HeroComponent() {
    return (
        <div className="w-full p-20 bg-gray-100 h-96">
            <div className="flex flex-col items-center justify-center">
                <h1 className="text-4xl font-bold">Heading Title</h1>
                <p className="text-lg">Description Subheading</p>
                <div className="mt-4">
                    <button className="px-6 py-2 text-center text-white bg-indigo-600 rounded-md shadow-md">
                        Get started
                    </button>
                </div>
            </div>
        </div>
    );
}


Enter fullscreen mode Exit fullscreen mode

react tailwind css hero section

Example 2

Tailwind css hero section with background image.



import React from "react";

export default function HeroComponent() {
    return (
        <div className='bg-[url("https://cdn.pixabay.com/photo/2022/10/03/23/41/house-7497001__340.png")] h-96 w-full bg-cover bg-center p-20'>
            <div className="flex flex-col items-center justify-center">
                <h1 className="mb-2 text-4xl font-bold text-center">
                    Hero section with background image
                </h1>
                <p className="text-lg text-center text-white">
                    This isLorem ipsum dolor sit amet consectetur adipisicing
                    elit.
                </p>
                <div className="mt-4">
                    <button className="px-6 py-2 text-center text-white bg-indigo-600 rounded-md shadow-md">
                        Get started
                    </button>
                </div>
            </div>
        </div>
    );
}


Enter fullscreen mode Exit fullscreen mode

react tailwind css hero section with background image

Example 3

Tailwind css responsive hero section with image.



import React from "react";

export default function HeroComponent() {
    return (
        <div className="bg-black">
            <section className="container items-center px-4 pb-12 mx-auto mt-20 lg:flex md:px-40">
                <div className="flex-1 space-y-4 sm:text-center lg:text-left">
                    <h1 className="text-4xl font-bold text-yellow-500">
                        Happy halloween
                    </h1>
                    <p className="max-w-xl leading-relaxed text-gray-300 sm:mx-auto lg:ml-0">
                        It is a long established fact that a reader will be
                        distracted by the readable content of a page when
                        looking at its layout.
                    </p>
                    <div className="items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start">
                        <a
                            href="javascript:void(0)"
                            className="block px-6 py-2 text-center text-white bg-yellow-600 rounded-md"
                        >
                            Buy Now
                        </a>
                        <a
                            href="javascript:void(0)"
                            className="block px-6 py-2 text-center text-gray-500 bg-white rounded-md"
                        >
                            See More
                        </a>
                    </div>
                </div>
                <div>
                    <img
                        src="https://cdn.pixabay.com/photo/2022/09/29/17/15/halloween-7487706__340.jpg"
                        className="w-full mx-auto mt-6 sm:w-10/12 lg:w-full"
                    />
                </div>
            </section>
        </div>
    );
}


Enter fullscreen mode Exit fullscreen mode

react tailwind css responsive hero section with image

Buy Me A laptop

Read Also

👉 Tailwind CSS Halloween Buttons Tutorial Example

👉 Tailwind CSS List Style Marker Example

👉 Create a Google Clone UI using Tailwind CSS

👉 Tailwind CSS Use Custom Fonts Example

👉 Tailwind CSS Line Chart Example

👉 Tailwind CSS Gradient Button Example

👉 Tailwind CSS Text Gradient Example

👉 Tailwind CSS Simple POST CRUD UI Example

👉 Tailwind CSS Thank You Page Example

👉 Tailwind CSS 3 Breadcrumb Example

👉 Tailwind CSS 3D Button Example

👉 How to Use Custom Colors in Tailwind CSS

👉 How to Use Strike Tag (cut text) in Tailwind CSS

👉 Tailwind CSS Headings Typography Examples

👉 Tailwind CSS Product List Example

👉 How to Center a Div in Tailwind CSS

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs