GoogleMailClone — HTML Admin dashboard Template

SHA-256: 44ea5d03912f7baf5fbf9c6caff1206ef5cc205e1fef416190388a6f917d4bcc

2026-10-15T01:25:53.825Z

<div align="center">
  <img src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x_r5.png" 
       alt="Google Mail Clone" width="160">
  <h1>Google Mail UI Clone</h1>
  <h4>A responsive Google Mail (Gmail) interface clone built with 
      <a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a>, 
      <a href="https://fontawesome.com" target="_blank">Font Awesome</a>, 
      and HTML.</h4>

  <p>
    <a href="https://jatinsoni08.github.io/GoogleMailClone/">View Live Demo</a> ·
    <a href="https://github.com/jatinsoni08/GoogleMailClone/issues">Report Bug</a> ·
    <a href="https://github.com/jatinsoni08/GoogleMailClone/issues">Request Feature</a>
  </p>

  <p>
    <img src="https://img.shields.io/badge/Google%20Mail-Clone-red?style=for-the-badge&logo=gmail" alt="Google Mail Clone">
    <img src="https://img.shields.io/badge/Tailwind-CSS-38B2AC?style=for-the-badge&logo=tailwind-css" alt="Tailwind CSS">
    <img src="https://img.shields.io/badge/Design-Responsive-green?style=for-the-badge" alt="Responsive Design">
    <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5">
  </p>

  <p>
    <a href="#key-features">Key Features</a> •
    <a href="#tech-stack">Tech Stack</a> •
    <a href="#responsive-design">Responsive Design</a> •
    <a href="#installation">Installation</a> •
    <a href="#usage">Usage</a> •
    <a href="#preview">Preview</a> •
    <a href="#license">License</a>
  </p>

  <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
    <img src="GoogleMail.png" alt="Google Mail Clone Preview" width="600">
  </div>
</div>

---

## ✨ Key Features

- **📱 Responsive Layout** – Works on desktop, tablet, and mobile.  
- **📥 Sidebar Navigation** – Inbox, Starred, Drafts, Sent, Spam, Trash, and More.  
- **🔍 Search Bar** – Modern search input with filter icon.  
- **📑 Categories Tabs** – Primary, Social, Promotions, Updates.  
- **📩 Email List** – Sample styled email items with sender, subject, and time.  
- **⚡ Interactive Sidebar** – Expand/collapse with localStorage support.  
- **🎨 Clean UI** – Inspired by Gmail’s minimal and functional design.  

---

## 🛠️ Tech Stack

| Technology | Purpose |
|------------|---------|
| <img src="https://cdn.worldvectorlogo.com/logos/html-1.svg" width="20" height="20"> **HTML5** | Semantic markup structure |
| <img src="https://cdn.worldvectorlogo.com/logos/tailwind-css-2.svg" width="20" height="20"> **Tailwind CSS** | Utility-first CSS framework |
| <img src="https://cdn.worldvectorlogo.com/logos/font-awesome-1.svg" width="20" height="20"> **Font Awesome** | Icons library |
| <img src="https://cdn.worldvectorlogo.com/logos/javascript-1.svg" width="20" height="20"> **Vanilla JavaScript** | Sidebar toggle & interactions |

---

## 📱 Responsive Design

This Gmail clone adapts to all screen sizes:

| Device | Layout Features |
|--------|----------------|
| **📱 Mobile** (< 768px) | Bottom navigation bar, floating compose button |
| **📟 Tablet** (768px - 1024px) | Sidebar toggle available, wider layout |
| **💻 Desktop** (> 1024px) | Full sidebar, categories, and right panel |

---

## 🚀 Installation

No build tools required! Run it directly:

```bash
# Clone the repo
git clone https://github.com/jatinsoni08/GoogleMailClone.git

# Open folder
cd GoogleMailClone

# Run in browser
open index.html