https://github.com/codewithmoses/tailwind-responsive-starter-v2.01
Tailwind Responsive Starter V2.01 is a simple HTML template designed for beginners who want to quickly set up a responsive website with Tailwind CSS. This template includes a dark/light theme toggle, a responsive mobile navbar, and basic sections like the header, hero, features, contact, and footer.
https://github.com/codewithmoses/tailwind-responsive-starter-v2.01
html-tailwind-with-darkmode responsive-tailwind-starter tailwind-cdn-theme tailwind-dark-mode tailwind-html-starter
Last synced: 3 months ago
JSON representation
Tailwind Responsive Starter V2.01 is a simple HTML template designed for beginners who want to quickly set up a responsive website with Tailwind CSS. This template includes a dark/light theme toggle, a responsive mobile navbar, and basic sections like the header, hero, features, contact, and footer.
- Host: GitHub
- URL: https://github.com/codewithmoses/tailwind-responsive-starter-v2.01
- Owner: codewithmoses
- Created: 2024-08-25T10:14:20.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-25T11:06:26.000Z (9 months ago)
- Last Synced: 2025-01-13T05:44:04.127Z (4 months ago)
- Topics: html-tailwind-with-darkmode, responsive-tailwind-starter, tailwind-cdn-theme, tailwind-dark-mode, tailwind-html-starter
- Language: HTML
- Homepage: https://codewithmoses.github.io/Tailwind-Responsive-Starter-V2.01/
- Size: 746 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# Tailwind Responsive Starter V2.01
## File Tree
```
.
├── dark.png
├── index.html
├── light.png
└── README.md
```
---
**Tailwind Responsive Starter V2.01** is a simple HTML template designed for beginners who want to quickly set up a responsive website with Tailwind CSS. This template includes a dark/light theme toggle, a responsive mobile navbar, and basic sections like the header, hero, features, contact, and footer.
## Table of Contents
- [Introduction](#introduction)
- [Installation](#installation)
- [Project Structure](#project-structure)
- [HTML Structure](#html-structure)
- [Header Section](#header-section)
- [Hero Section](#hero-section)
- [Features Section](#features-section)
- [Contact Section](#contact-section)
- [Footer Section](#footer-section)
- [CDN Links](#cdn-links)
- [Scripts](#scripts)
- [License](#license)
## Introduction
This project is intended for those new to Tailwind CSS who want a simple, responsive HTML file that includes basic setup and features like theme toggling. The template comes pre-configured with essential CDN links and scripts.
## Installation
### Cloning the Repository
1. Clone the repository to your local machine using the following command:
```bash
git clone https://github.com/codewithmoses/Tailwind-Responsive-Starter-V2.01.git
```
2. Navigate to the project directory:
```bash
cd tailwind-responsive-starter-v2.01
```
3. Open the project in your favorite code editor.
### Setting Up the Project from Scratch
1. **Create a new HTML file** (e.g., `index.html`) in your project directory.
2. **Add the required CDN links** to the `` section of your HTML file.
3. **Add the HTML structure** for each section (header, hero, features, contact, footer) using the snippets provided below.
4. **Add the necessary scripts** before the closing `` tag.
5. Customize the content as needed.
## Project Structure
Your project structure should look something like this:
```
tailwind-responsive-starter-v2.01/
│
├── index.html
├── README.md
└── LICENSE
```
## HTML Structure
### Header Section
```html
```
### Hero Section
```html
Payments tool for software companies
From checkout to global sales tax compliance, companies around the
world use Flowbite to simplify their payment stack.
Get started
Speak to Sales
```
### Features Section
```html
Designed for business teams like yours
Here at Flowbite we focus on markets where technology, innovation,
and capital can unlock long-term value and drive economic growth.
Marketing
Plan it, create it, launch it. Collaborate seamlessly with all the
organization and hit your marketing goals every month with our
marketing plan.
Legal
Protect your organization, devices and stay compliant with our
structured workflows and custom permissions made for you.
Business Automation
Auto-assign tasks, send Slack messages, and much more. Now power
up with hundreds of new templates to help you get started.
Finance
Audit-proof software built for critical financial operations like
month-end close and quarterly budgeting.
Enterprise Design
Craft beautiful, delightful experiences for both marketing and
product with real cross-company collaboration.
Operations
Keep your company’s lights on with customizable, iterative, and
structured workflows built for all efficient teams and individual.
```
### Contact Section
```html
Contact Us
Got a technical issue? Want to send feedback about a beta feature?
Need details about our Business plan? Let us know.
Your email
Subject
Your message
Send message
```
### Footer Section
```html
Brand
Open-source library of over 400+ web components and interactive
elements built for better web.
© 2021-2022 Moses Oni™. All
Rights Reserved.
```
## CDN Links
Add the following CDN links to the `` section of your HTML file:
1. **Tailwind CSS:**
```html
```
**Tailwind Config:**
```html
tailwind.config = {
darkMode: "class",
theme: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
},
},
corePlugins: {
preflight: false,
},
};
```
2. **Tailwind TW Element:**
```html
```
3. **Font Awesome CDN:**
```html
```
4. **Google Roboto Font:**
```html
```
## Scripts
Add the following scripts before the closing `` tag of your HTML file:
1. **Theme Toggle and Responsive Mobile Navbar Script:**
```html
const themeToggleBtn = document.getElementById("theme-toggle");
const darkIcon = document.getElementById("theme-toggle-dark-icon");
const lightIcon = document.getElementById("theme-toggle-light-icon");
if (
localStorage.getItem("color-theme") === "dark" ||
(!localStorage.getItem("color-theme") &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
darkIcon.classList.remove("hidden");
} else {
document.documentElement.classList.remove("dark");
lightIcon.classList.remove("hidden");
}
themeToggleBtn.addEventListener("click", function () {
darkIcon.classList.toggle("hidden");
lightIcon.classList.toggle("hidden");
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
}
} else {
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
}
}
});
// Mobile menu toggle script
const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
const mobileMenu = document.getElementById("mobile-menu-2");
const menuIcon = document.getElementById("menu-icon");
const closeIcon = document.getElementById("close-icon");
const menuLinks = document.querySelectorAll(".menu-link");
mobileMenuToggle.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
menuIcon.classList.toggle("hidden");
closeIcon.classList.toggle("hidden");
});
menuLinks.forEach((link) => {
link.addEventListener("click", () => {
mobileMenu.classList.add("hidden");
menuIcon.classList.remove("hidden");
closeIcon.classList.add("hidden");
});
});
```
2. **TW Elements JS Script:**
```html
```
3. **Font Awesome JS Script:**
```html
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---