Tailwind CSS Simple Hero Section Example

In this tutorial we will create simple hero section , hero section with image, responsive hero section , examples with Tailwind CSS



Setup Project

Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM


Example 1

Simple Hero Section

<div class="bg-yellow-200">
    <div class="container flex px-6 py-4 mx-auto lg:h-128 lg:py-16">
        <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
            <div class="max-w-lg">
                <h1 class="text-3xl tracking-wide text-white text-gray-800 lg:text-4xl">Set your title</h1>
                <p class="mt-4 text-gray-300 text-gray-600">Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Aut quia asperiores alias vero magnam recusandae adipisci ad vitae
                    laudantium quod rem voluptatem eos accusantium cumque.</p>
                <div class="mt-6">
                    <a href="#"
                        class="block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md lg:inline hover:bg-blue-400">Download
                    </a>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-center w-full h-96 lg:w-1/2">
            <img class="object-cover w-full h-full max-w-2xl rounded-md"
                src="https://source.unsplash.com/user/erondu/1600x900" alt="apple watch photo">
        </div>
    </div>
</div>



Example 2

Simple Responsive Hero Section

<div class="bg-gray-200 ">
    <div class="container px-6 py-4 mx-auto lg:flex lg:h-128 lg:py-16 ">
        <div class="flex flex-col items-center w-full lg:flex-row lg:w-1/2">
            <div class="max-w-lg">
                <h1 class="text-xl tracking-wide text-white text-gray-800 lg:text-3xl lg:text-4xl">Set your
                    Title</h1>
                <p class="mt-4 text-gray-300 text-gray-600">Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Aut quia asperiores alias vero magnam recusandae adipisci ad vitae
                    laudantium quod rem voluptatem eos accusantium cumque.</p>
                <div class="mt-6">
                    <a href="#"
                        class="inline-block px-3 py-2 font-semibold text-center text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400">
                        Read More</a>
                </div>
            </div>
        </div>
        <div class="flex items-center justify-center w-full mt-2 lg:h-96 lg:w-1/2">
            <img class="object-cover w-full max-w-2xl rounded-md lg:h-full"
                src="https://source.unsplash.com/user/erondu/1600x900" alt="apple watch photo">
        </div>
    </div>
</div>