# Building a Hero Section with HTML, Tailwind CSS, and JavaScript
In this article, I'll walk you through how I built a dynamic hero section for a crypto-themed website using **HTML**, **Tailwind CSS**, and a bit of **JavaScript**. The hero section includes a responsive navigation bar, a toggleable dark mode, and a visually appealing layout with images and text.
---
## Table of Contents
1. [Project Overview](#project-overview)
2. [HTML Structure](#html-structure)
3. [Styling with Tailwind CSS](#styling-with-tailwind-css)
4. [Adding Interactivity with JavaScript](#adding-interactivity-with-javascript)
5. [Final Thoughts](#final-thoughts)
---
## Project Overview
The hero section is designed to showcase a blog post about a crypto game. It includes:
- A **navigation bar** with a logo, blog link, topics link, and a theme toggle button.
- A **hero section** with a title, date, and an image.
- A **dark mode toggle** implemented using JavaScript.
---
## HTML Structure
The HTML structure is clean and semantic. Here's a breakdown of the key components:
### 1. **Meta Tags and Fonts**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
</head>
```
- The `meta` tags ensure proper rendering and responsiveness.
- The `Cutive Mono` font from Google Fonts is used for a techy, monospaced look.
### 2. **Navigation Bar**
```html
<nav>
<div class="flex justify-between px-8 py-4 items-center">
<div class="flex items-center gap-4">
<img src="./img/logo.png" width="50px" height="50px" alt="">
<a class="text-[#ff00b7]" href="">Blog</a>
<a class="text-[15px] hover:bg-[#f4f4f4] rounded-xl w-[70px] h-[30px] items-center text-center" href="">Topics</a>
</div>
<div class="flex gap-2">
<button id="theme-toggle" class="bg-[#f4f4f4] rounded-xl w-[50px] h-[30px] text-[#222222] text-[15px]">D/N</button>
<button class="text-[#ff00b7] bg-[#fff0ff] rounded-xl w-[110px] h-[30px] text-[15px] hover:bg-[#feebfc]">Launch App</button>
</div>
</div>
</nav>
```
- The navigation bar uses Flexbox for alignment.
- The `theme-toggle` button is used to switch between light and dark modes.
### 3. **Hero Section**
```html
<div class="mx-[130px]">
<a class="font-mono text-[15px]" href="">All Stories ></a> <a class="font-mono text-[15px]" href="">#Unichain</a>
</div>
<br><br>
<div class="flex justify-around items-center py-[40px] px-[60px]">
<div>
<span class="font-mono relative left-[170px] text-[15px]">March 06, 2025</span><br><br>
<h1 class="text-6xl w-[470px] text-center font-normal">Crypto: The Game Season 3 is Here and Live on Unichain</h1> <br>
<span class="font-mono text-[15px] relative left-[200px]">#Unichain</span>
</div>
<img src="./img/crypto.png" width="685px" height="705px" alt="">
</div>
<div class="relative bottom-[650px] left-[120px]">
<img src="./img/up.png" width="160px" height="160px" alt="">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="./img/down.png" width="160px" height="160px" alt="">
</div>
```
- The hero section is divided into two parts: text content and an image.
- The `relative` and `bottom` classes are used to position decorative images.
---
## Styling with Tailwind CSS
Tailwind CSS makes it easy to style components directly in the HTML. Here's how I used it:
### 1. **Responsive Design**
- The `mx-[130px]` and `px-[60px]` classes add horizontal padding for larger screens.
- The `flex` and `justify-around` classes ensure the content is centered and spaced evenly.
### 2. **Typography**
- The `font-mono` class applies the `Cutive Mono` font.
- The `text-6xl` class is used for the main heading to make it stand out.
### 3. **Buttons and Hover Effects**
- The `hover:bg-[#f4f4f4]` class adds a hover effect to the "Topics" link.
- The `rounded-xl` class gives buttons a rounded appearance.
### 4. **Dark Mode**
- The `bg-white`, `text-black`, `bg-gray-900`, and `text-white` classes are used to toggle between light and dark modes.
---
## Adding Interactivity with JavaScript
The dark mode toggle is implemented using JavaScript. Here's the code:
```javascript
const button = document.getElementById('theme-toggle');
const html = document.documentElement;
button.addEventListener('click', () => {
if (html.classList.contains('light')) {
html.classList.remove('light');
html.classList.add('dark');
document.body.classList.remove('bg-white', 'text-black');
document.body.classList.add('bg-gray-900', 'text-white');
} else {
html.classList.remove('dark');
html.classList.add('light');
document.body.classList.remove('bg-gray-900', 'text-white');
document.body.classList.add('bg-white', 'text-black');
}
});
```
- The script toggles between `light` and `dark` classes on the `html` element.
- It also updates the background and text colors accordingly.
---
## Final Thoughts
This hero section is a great example of how **HTML**, **Tailwind CSS**, and **JavaScript** can work together to create a modern, responsive, and interactive web design. By leveraging Tailwind's utility-first approach, I was able to style the components quickly and efficiently. The dark mode toggle adds a nice touch of interactivity, making the site more user-friendly.
Feel free to use this as a starting point for your own projects! You can customize the colors, fonts, and layout to suit your needs.
Sign in with Wallet
Connect another wallet