Simple Centered Hero Section with Responsive Navbar
Responsive Navbar is available with vanilla javascript
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a
href="#"
class="bg-black py-2 px-6 rounded-full text-sm/6 font-semibold text-gray-100 hover:bg-indigo-600"
>Log in <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
id="closeMenu"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-40">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
>
How to start ?
<a href="#" class="font-semibold text-indigo-600"
><span class="absolute inset-0" aria-hidden="true"></span>Read
more <span aria-hidden="true">→</span></a
>
</div>
</div>
<div class="text-center">
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
Transform Your idea to Production 🚀
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-500 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from concept
to production."
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Dark Mode Hero Section with background image
with responsive navbar . note: if view code is not working , please reload the page !
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div
id="bg-image"
class="bg-cover bg-center min-h-screen"
style="
background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply');
"
>
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-100"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-100"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-100"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-100"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a
href="#"
class="py-2 px-6 rounded-full text-sm/6 font-bold text-gray-100"
>Log in <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
id="closeMenu"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-bold text-gray-100"
>Log in</a
>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-20 lg:px-8">
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-40">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-400 ring-1 ring-gray-700 hover:ring-gray-900/20"
>
How to start ?
<a href="#" class="font-semibold text-white"
><span class="absolute inset-0" aria-hidden="true"></span>Read
more <span aria-hidden="true">→</span></a
>
</div>
</div>
<div class="text-center">
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-100 sm:text-7xl"
>
Transform Your idea to Production 🚀
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-400 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from concept
to production."
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-100"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Hero Section with app screenshot
if view code is not working, please reload the page
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a
href="#"
class="bg-black py-2 px-6 rounded-full text-sm/6 font-semibold text-gray-100 hover:bg-indigo-600"
>Log in <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
id="closeMenu"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-40">
<div class="text-center">
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
Transform Your idea to Production 🚀
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-500 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from concept
to production."
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
<div
class="max-w-auto border-10 md:border-20 border-slate-200 rounded-xl -mt-20"
>
<img
alt="App screenshot"
src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
width="2432"
height="1442"
class="agd ber bex bga"
/>
</div>
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Hero Section with split image
If view code is not working , please reload the page
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<header class="min-h-screen">
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="p-10 col-span-2">
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-40">
<a href="#" class="mb-20">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<div class="hidden sm:mb-8 sm:flex mt-20">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
>
How to start ?
<a href="#" class="font-semibold text-indigo-600"
><span class="absolute inset-0" aria-hidden="true"></span
>Read more <span aria-hidden="true">→</span></a
>
</div>
</div>
<div>
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
Transform Your idea to Production 🚀
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-500 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from
concept to production."
</p>
<div class="mt-10 flex items-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
</div>
<div class="min-h-screen w-full justify-end col-span-1">
<img
alt=""
src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80"
class="h-full object-cover"
/>
</div>
</div>
</header>
</body>
</html>
Hero Section with angled image on right
if view code is not working , please reload the page !
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-clifford: #da373d;
}
@layer utilities {
.clip-path-left-bottom {
clip-path: polygon(0% 100%, 100% -400%, 100% 100%);
}
}
</style>
</head>
<body class="bg-white">
<div class="bg-white">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="col-span-1">
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex lg:gap-x-12 pr-10">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Login</a
>
</div>
</div>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
id="closeMenu"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<div class="max-w-5xl md:mt-40 py-32 sm:py-48 lg:py-40 pl-20">
<div class="hidden sm:mb-8 sm:flex">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
>
How to start ?
<a href="#" class="font-semibold text-indigo-600"
><span class="absolute inset-0" aria-hidden="true"></span
>Read more <span aria-hidden="true">→</span></a
>
</div>
</div>
<div class="">
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
Transform Your idea to Production 🚀
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-500 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from
concept to production."
</p>
<div class="mt-10 flex items-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
</div>
<div class="md:min-h-screen w-full justify-end col-span-1">
<img
alt=""
src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
class="hidden md:block h-full object-cover clip-path-left-bottom"
/>
<img
alt=""
src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
class="md:hidden h-full object-cover md:clip-path-left-bottom"
/>
<div>
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Hero Section with image titles
If the view code is not working, please reload the page
Hero Sections Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-white">
<div class="bg-white relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
>
<div
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
<header class="absolute inset-x-0 top-0 z-50">
<nav
class="flex items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div class="flex lg:hidden">
<button
id="menuToggle"
type="button"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a
href="#"
class="bg-black py-2 px-6 rounded-full text-sm/6 font-semibold text-gray-100 hover:bg-indigo-600"
>Log in <span aria-hidden="true">→</span></a
>
</div>
</nav>
<!-- Mobile menu -->
<div
id="mobileMenu"
class="hidden fixed inset-0 z-50 bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
id="closeMenu"
type="button"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
class="size-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="mt-6">
<div class="space-y-2 py-6">
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="col-span-1">
<div class="mx-auto max-w-4xl py-32 sm:py-48 lg:py-40">
<div class="pl-10 md:mt-40">
<h1
class="text-5xl font-bold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
We’re changing the way people connect
</h1>
<p
class="mt-8 text-lg font-normal text-pretty text-gray-500 sm:text-xl/8"
>
"Turn your ideas into reality with seamless execution from
concept to production."
</p>
<div class="mt-10 flex items-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true">→</span></a
>
</div>
</div>
</div>
</div>
<div class="col-span-1">
<div class="hidden md:grid md:grid-cols-3">
<div
class="col-span-1 flex items-center justify-center min-h-screen"
>
<div class="w-[250px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
</div>
<div
class="col-span-1 flex flex-col gap-10 items-center justify-center min-h-screen"
>
<div class="w-[250px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
<div class="w-[250px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
</div>
<div class="col-span-1 flex flex-col gap-10 items-center mt-8">
<div class="w-[250px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
<div class="w-[250px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
</div>
</div>
<div class="md:hidden grid grid-cols-2 gap-4">
<div class="col-span-1 w-[210px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
<div class="col-span-1 w-[210px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
<div class="col-span-1 w-[210px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
<div class="col-span-1 w-[210px] h-[350px]">
<img
alt=""
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
class="w-full h-full object-cover rounded-lg"
/>
</div>
</div>
</div>
</div>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
></div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.getElementById("menuToggle");
const closeMenu = document.getElementById("closeMenu");
const mobileMenu = document.getElementById("mobileMenu");
menuToggle.addEventListener("click", function () {
mobileMenu.classList.toggle("hidden");
});
closeMenu.addEventListener("click", function () {
mobileMenu.classList.add("hidden");
});
// Close menu if clicking outside
document.addEventListener("click", function (event) {
if (
!mobileMenu.contains(event.target) &&
!menuToggle.contains(event.target)
) {
mobileMenu.classList.add("hidden");
}
});
});
</script>
</body>
</html>
Code copied to clipboard