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>
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example