How to Create Simple Website Using HTML and Tailwind CSS
In today’s digital world, creating a personal or business website is easier than ever, especially with modern tools like Tailwind CSS. Tailwind is a utility-first CSS framework that helps you style your website quickly and efficiently. In this guide, you’ll learn how to create a simple, responsive website using just HTML and Tailwind CSS — no advanced coding skills required.
✅ What You Need to Get Started
Before we begin, make sure you have the following:
- A code editor like VS Code
- A modern web browser (e.g., Chrome or Firefox)
- Basic understanding of HTML
- Internet connection to use Tailwind CDN
🧱 Step 1: Set Up Your HTML File
Create a new file named index.html and open it in your code editor. Then, add the following basic HTML structure and include Tailwind CSS via CDN:
<!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>
<link rel=”stylesheet” href=”style.css” >
</head>
<body>
<div class=”@container min-h-screen bg-[url(/image.png)] bg-center bg-cover px-28 py-5 relative”>
<nav class=”flex items-center”>
<img src=”logo.png” class=”w-28 cursor-pointer”>
<ul class=”flex-1 text-center”>
<li class=”list-none inline-block px-5″ ><a href=”” class=”no-underline text-white px-2″>Home</a></li>
<li class=”list-none inline-block px-5″><a href=”” class=”no-underline text-white px-2″>About</a></li>
<li class=”list-none inline-block px-5″><a href=”” class=”no-underline text-white px-2″>Service</a></li>
<li class=”list-none inline-block px-5″><a href=”” class=”no-underline text-white px-2″>Portfolio</a></li>
<li class=”list-none inline-block px-5″><a href=”” class=”no-underline text-white px-2″>Contact</a></li>
</ul>
<div><a href=”” class=” text-white bg-yellow-600 rounded-3xl py-3 px-8 font-medium inline-block mr-4 hover:bg-transparent hover:border-yellow-600 hover:border border border-transparent duration-300″>Hire Me!</a></div>
</nav>
<div class=”text-white mt-48 max-w-lg”>
<h1 class=”text-6xl font-semibold leading-normal”>Your Brand<br>Create in <span class=”font-light text-4xl text-yellow-600″>Less than hour</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, maxime fugiat? Eligendi placeat accusantium nam, voluptate assumenda necessitatibus optio corporis, error magni aut ea, nobis porro minus. Ipsum, minima distinctio?</p>
<div class=”mt-10″>
<a href=”” class=”bg-yellow-600 rounded-3xl py-3 px-8 font-medium inline-block mr-4 hover:bg-transparent hover:border-yellow-600 hover:border border border-transparent duration-300″>Connect Now</a>
<a href=”” class=”border-yellow-600 border py-3 px-8 rounded-3xl hover:bg-yellow-600″>Download Portfolio</a>
</div>
<img src=”img.png” class=”w-full xl:w-1/2 xl:absolute bottom-30 right-20″>
</div>
</div>
</body>
</html>
For Images : https://drive.google.com/drive/folders/10f2vPY-_vc5iVrugSyUy_JDuVhwxE-9U?usp=sharing
🎯 Why Use Tailwind CSS?
- Fast Development: Use pre-built classes directly in HTML.
- Customizable: Easily change styles and themes with utility classes.
- Responsive Design: Built-in responsive breakpoints.
- Modern Look: Clean, minimal, and modern styles.
🚀 Conclusion
Creating a simple website using HTML and Tailwind CSS is a great way to start your web development journey. It’s beginner-friendly, flexible, and helps you learn the basics of responsive design. Once you’re comfortable, you can expand your site by adding images, forms, or even animations using Tailwind.
So go ahead and try it — your first website is just a few lines of code away!
