How to Create a Stunning Hero Section with HTML, Tailwind CSS, Custom CSS3, and Dark Mode
Creating a visually engaging hero section is one of the most impactful ways to capture a visitor's attention on your website. In this tutorial, we’ll break down how to build a stunning, responsive hero section using HTML, Tailwind CSS, a bit of custom CSS3 for finesse, and a splash of JavaScript to add dark mode toggle functionality.
We’ll use a fully functional example from a project called Echoes of Ping, where we combine style and interactivity in a modern hero section.
What You’ll Learn:
How to structure a responsive hero layout with HTML and Tailwind CSS.
How to enhance visuals using custom CSS3 (e.g., gradients, shadows, blur effects).
How to implement a toggleable dark mode with a custom switch component.
📺 Video Walkthrough
To see the whole build in action, check out this YouTube tutorial:
▶️ Watch the full video on YouTube
🧩 Project Code and Files
Explore the full source code and try it out yourself:
Give it a Star ⭐!
1. HTML Structure
The HTML provides the scaffolding. Here's how the layout is structured:
Key Sections:
A gradient blur background circle for depth.
A simulated browser tab with an address bar.
A headline with a call-to-action.
A content container for cards (posts, blogs, videos).
A light/dark toggle.
<!-- HTML Code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echoes of Ping | Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container flex justify-center items-end pb-10">
<div class="circle rounded-full"></div>
<div class="absolute top-16 flex flex-col w-full items-center">
<!-- Simulated Browser Tab -->
<div class="flex items-center w-full">
<div class="flex px-6">
<div class="h-2 w-2 rounded-full mx-1 red"></div>
<div class="h-2 w-2 rounded-full mx-1 yellow"></div>
<div class="h-2 w-2 rounded-full mx-1 green"></div>
</div>
<div class="flex bg-white items-center w-5/12 px-6 py-4 rounded-md app-shadow transition duration-300">
<i class="fa-solid fa-star app-color-yellow text-xs"></i>
<span class="font-bold app-color-black ml-4 mr-auto text-xs">echoesofping.hashnode.dev</span>
<i class="fa-solid fa-ellipsis app-color-lavendar"></i>
</div>
<a href="https://youtube.com/@echoes-of-ping" target="_blank" rel="noopener noreferrer" class="mr-auto flex items-center bg-white dark:bg-white border-2 border-transparent rounded-md px-6 py-4 ml-3 app-shadow hover:border-[#22d3ee] dark:hover:border-[#fb28cd] transition duration-300">
<i class="fa-brands fa-youtube app-color-dribbble dark:text-pink-400 mr-2"></i>
<span class="font-bold app-color-black dark:text-black text-xs">YouTube</span>
</a>
<div class="flex bg-white px-6 py-4 app-shadow rounded-md mr-6 transition duration-300">
<span class="font-bold app-color-black text-xs">Join now</span>
<div class="w-px app-bg-light-white-2 mx-4"></div>
<i class="fa-regular fa-user mr-2 app-color-black"></i>
<i class="fa-solid fa-angle-down text-xs app-color-black"></i>
</div>
</div>
<!-- Headline -->
<div class="flex flex-col text-center my-36">
<span class="font-semibold text-4xl mb-4 app-title">Why not Your own Services?</span>
<span class="app-color-black font-semibold">Start Your Self-hosting Journey with us!</span>
</div>
<!-- Content Cards with Dark Mode Toggle -->
<div class="bg-white/50 w-10/12 px-6 pt-12 pb-16 app-shadow rounded-xl backdrop-blur-[200px] transition duration-300">
<div class="flex pr-6">
<span class="font-semibold text-sm app-color-gray w-14 mx-12">Posts</span>
<span class="font-semibold text-sm app-color-gray w-14 mx-12">Blogs</span>
<span class="font-semibold text-sm app-color-gray w-14 mx-12 mr-auto active">Vidoes</span>
<label class="flex items-center cursor-pointer">
<span class="font-semibold text-sm app-color-black mr-6">Lights</span>
<div class="switch">
<input type="checkbox" id="darkToggle" class="switch-checkbox" />
<div class="switch-bg"></div>
<div class="switch-indicator"></div>
</div>
</label>
</div>
<!-- Cards -->
<div class="flex mt-16">
<div class="bg-white/80 mx-6 flex flex-col w-1/3 p-6 rounded-xl border-2 border-white">
<span class="font-semibold text-xs app-color-lavendar">Installation Guide</span>
<span class="font-semibold text-lg app-color-black">Speedtest-Tracker</span>
</div>
<div class="bg-white/80 mx-6 flex flex-col w-1/3 p-6 rounded-xl border-2 border-white">
<span class="font-semibold text-xs app-color-lavendar">Setup</span>
<span class="font-semibold text-lg app-color-black">Uptime-Kuma</span>
</div>
<div class="bg-white/80 mx-6 flex flex-col w-1/3 p-6 rounded-xl border-2 border-white">
<span class="font-semibold text-xs app-color-lavendar">Playlist</span>
<span class="font-semibold text-lg app-color-black">HomeLab(Self-hosting)</span>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Custom CSS3 for Style Polish
The style.css file adds personality beyond Tailwind defaults:
Key Custom Features:
Fonts via Google Fonts (Poppins).
Gradient & Blur: A vibrant blurred circle background for flair.
Switch toggle: A custom-built switch UI using pure CSS.
Color classes: Easy-to-apply color utilities like
.app-color-black,.app-color-yellow, etc.
/* Key Snippets from style.css */
body {
font-family: 'Poppins', sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.circle {
width: 450px;
height: 450px;
background: linear-gradient(to bottom, #fa39ad 40%, #fa6c4c 50%);
filter: blur(120px);
}
.switch-bg {
height: 24px;
width: 44px;
background: #fb28cd;
border-radius: 15px;
}
.switch-indicator {
position: absolute;
height: 20px;
width: 20px;
background: #fb28cd;
border: 5px solid white;
border-radius: 50%;
top: 2px;
left: 2px;
transition: .2s ease-out;
}
.switch-checkbox:checked ~ .switch-indicator {
transform: translateX(100%);
}
.switch-checkbox:checked ~ .switch-bg {
background: #e9ecfa;
}
3. JavaScript for Dark Mode Toggle
A simple script adds interactivity to the custom switch, toggling a dark mode theme.
document.getElementById("darkToggle").addEventListener("change", function () {
document.body.classList.toggle("dark-mode", this.checked);
});
This toggles a .dark-mode class on <body>, triggering alternate styles via CSS.
Dark Mode CSS Examples:
body.dark-mode {
background-color: #0c1a1a;
color: #d4f9f0;
}
body.dark-mode .circle {
background: linear-gradient(to bottom, #00ffaa 40%, #0066ff 60%);
filter: blur(100px);
}
4. Responsive & Accessible Considerations
Tailwind ensures responsive design via utilities (
w-1/3,flex,items-center, etc.).Accessibility: Use semantic HTML and ensure color contrast is sufficient.
Dark Mode: Adds user comfort, especially in low-light environments.
5. Summary
You’ve built a striking hero section combining Tailwind’s utility-first styling with custom flair. You’ve also added a dark mode that smoothly toggles with a custom switch. This is more than just a UI — it’s a modern and polished entry point for any web project.
What to Try Next:
Add animations (e.g.,
framer-motion,@keyframes).Enhance accessibility with ARIA roles.
Fetch and display dynamic content with JavaScript.
Want more interactive sections like this? Start experimenting with component design using Tailwind’s @apply directive and tools like Alpine.js or Vue for dynamic behavior.
🚀 Live Demo
Try out the finished product live:
Stay creative, stay practical — and keep building cool stuff.
