Projects

Home / Project Details

App Design Web Design Simple Projects System Development
App Design Web Design Simple Projects System Development
Gmail Inbox UI in HTML and CSS

Gmail Inbox UI with HTML & CSS: A Developer’s Guide

Recreating the Gmail Inbox UI in HTML and CSS is an excellent project for anyone looking to sharpen their frontend web development skills. Gmail’s user interface is clean, highly functional, and responsive — making it a great model for learning advanced HTML structure, layout design with Flexbox or CSS Grid, and even component-based thinking.

In this post, we’ll guide you step by step to build a simplified Gmail inbox interface using only HTML and CSS — no JavaScript required.

1. Why Choose the Gmail UI for Practice?

Gmail is one of the most widely used email services, and its UI is a gold standard for productivity design. By cloning the Gmail interface, you will learn how to:

  • Create a sidebar layout
  • Use Flexbox for horizontal and vertical alignment
  • Design reusable card components for emails
  • Build a responsive interface

Whether you’re a beginner or an intermediate developer, this is a fantastic project to strengthen your layout and UI skills.

2. Tools You’ll Need

To start this project, all you need are the basic tools:

  • A code editor (e.g., VS Code)
  • A web browser (Google Chrome, Firefox, etc.)
  • Basic understanding of HTML and CSS

No frameworks, libraries, or external assets are required unless you want to expand the project further later.

3. HTML Structure Breakdown

The Gmail UI can be broken down into these major parts:

  • Sidebar (with navigation like Inbox, Sent, Drafts)
  • Top bar (search bar, user profile, settings)
  • Main content area (list of emails)

Here’s a basic skeleton of the HTML:

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gmail Clone UI</title>

    <link rel="stylesheet" href="CSS/style.css">
</head>

<body>

    <div class="header">
        <div class="left">
            <label for="toggle">
                <img src="Images/2311531.png" alt="" class="menu">
            </label>
            <img src="Images/logo.png" alt="" class="logo">
        </div>
        <div class="middle">
            <button class="search">
                <img src="Images/search-icon-png-21.png" alt="" class="btn-search">
            </button>
            <input type="text" class="search-box" placeholder="Search mail">
            <button class="filter">
                <img src="Images/4800805-200.png" alt="" class="btn-filter">
            </button>
        </div>
        <div class="right">
            <img src="Images/help-252.png" alt="" class="help">
            <img src="Images/settings-icon-1024x1022-x2c1qvd9.png" alt="" class="settings">
            <img src="Images/rounded-corners-uniformed.png" alt="" class="apps">
            <img src="Images/219983.png" alt="" class="profile-picture">
        </div>
    </div>
    <div class="container">
        <input type="checkbox" name="" id="toggle" checked>

        <div class="sidebar">
            <button class="compose">
                <img src="Images/compose.png" alt="" class="pen">
                Compose
            </button>

            <div class="navs">

                <ul>
                    <a href="">
                        <li>
                            <img src="Images/inbox.png" alt="" class="sidebar-icon">
                            Inbox
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <img src="Images/stars.png" alt="" class="sidebar-icon">
                            Starred
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <img src="Images/history.png" alt="" class="sidebar-icon">
                            Snoozed
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <img src="Images/send.png" alt="" class="sidebar-icon">
                            Sent
                        </li>
                    </a>

                    <hr>

                    <a href="">

                        <li>
                            <img src="Images/free-plus-icon-3107-thumb.png" alt="" class="sidebar-icon">
                            Labels

                        </li>
                    </a>
                </ul>
            </div>
            <div>
                <ul>
                    <a href="">
                        <li style="
                    display: grid;
                    grid-template-columns: 30px 1fr 30px;

                    ">
                            <img src="Images/upgrade-5.png" alt="" class="sidebar-icon">
                            Upgrade
                            <img src="Images/arrow.png" alt="" class="sidebar-icon">
                        </li>
                    </a>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="header-nav">
                <div class="left-nav">
                    <input type="checkbox" name="" id="one">
                    <img src="Images/refresh.png" alt="" class="nav">
                    <img src="Images/dots.webp" alt="" class="nav">
                </div>
                <div class="right-nav">
                    <p class="message-nav">
                        1-5 of 10
                    </p>
                    <img src="Images/less than.png" alt="" class="nav">
                    <img src="Images/greater.png" alt="" class="nav nav-right">
                </div>
            </div>
            <div class="header-navs">
                <div class="navigations active">
                    <img src="Images/inbox.png" alt="" class="nav">
                    <div>
                        <p class="info-title">
                            Primary
                        </p>

                    </div>
                </div>

                <div class="navigations">
                    <img src="Images/inbox.png" alt="" class="nav">
                    <div>
                        <p class="info-title">
                            Promotions
                        </p>
                        <p class="info">
                            Someone Sent you Message
                        </p>
                    </div>
                </div>

                <div class="navigations">
                    <img src="Images/inbox.png" alt="" class="nav">
                    <div>
                        <p class="info-title">
                            Social
                        </p>
                        <p class="info">
                            Abdirahman Mohamud is on ..
                        </p>
                    </div>
                </div>

            </div>

            <div class="message-box">
                <div class="sender">
                    <input type="checkbox" name="" id="two">
                    <img src="Images/stars.png" alt="" class="nav">
                    <p>Instagram</p>

                </div>
                <div class="message-middle">
                    <p class="title">
                        New login to Instagram frome chrome

                        <span class="message">
                            - Hi ustmaanka,

                            Someone tried to log in to your Instagram account
                            ...
                        </span>
                    </p>
                </div>
                <div class="time">
                    <p class="p-time">
                        3:49 PM
                    </p>
                </div>
            </div>
            <div class="message-box">
                <div class="sender">
                    <input type="checkbox" name="" id="three">
                    <img src="Images/stars.png" alt="" class="nav">
                    <p>Instagram</p>

                </div>
                <div class="message-middle">
                    <p class="title">
                        New login to Instagram frome chrome

                        <span class="message">
                            - Hi ustmaanka,

                            Someone tried to log in to your Instagram account
                            ...
                        </span>
                    </p>
                </div>
                <div class="time">
                    <p class="p-time">
                        3:49 PM
                    </p>
                </div>
            </div>

            <div class="message-box">
                <div class="sender">
                    <input type="checkbox" name="" id="four">
                    <img src="Images/stars.png" alt="" class="nav">
                    <p>Instagram</p>

                </div>
                <div class="message-middle">
                    <p class="title">
                        New login to Instagram frome chrome

                        <span class="message">
                            - Hi ustmaanka,

                            Someone tried to log in to your Instagram account
                            ...
                        </span>
                    </p>
                </div>
                <div class="time">
                    <p class="p-time">
                    3:49 PM
                </p>
                </div>
            </div>

            <div class="message-box">
                <div class="sender">
                    <input type="checkbox" name="" id="five">
                    <img src="Images/stars.png" alt="" class="nav">
                    <p>Instagram</p>

                </div>
                <div class="message-middle">
                    <p class="title">
                        New login to Instagram frome chrome

                        <span class="message">
                            - Hi ustmaanka,

                            Someone tried to log in to your Instagram account
                            ...
                        </span>
                    </p>
                </div>
                <div class="time">
                    <p class="p-time">
                    3:49 PM
                </p>
                </div>
            </div>

            <div class="message-box">
                <div class="sender">
                    <input type="checkbox" name="" id="six">
                    <img src="Images/stars.png" alt="" class="nav">
                    <p>Instagram</p>

                </div>
                <div class="message-middle">
                    <p class="title">
                        New login to Instagram frome chrome

                        <span class="message">
                            - Hi ustmaanka,

                            Someone tried to log in to your Instagram account
                            ...
                        </span>
                    </p>
                </div>
                <div class="time">
                    <p class="p-time">
                    3:49 PM
                </p>
                </div>
            </div>


        </div>



    </div>



    <script src="JS/script.js"></script>
</body>

</html>
HTML

4. CSS Styling

Now let’s bring the design to life with CSS.

CSS
* {
    margin: 0;
    padding: 0;

}


.header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    height: 60px;
    justify-content: space-between;
    margin-bottom: 10px;


}



.left {
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.left .menu {
    flex-wrap: nowrap;
    width: 30px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50px;
    margin-right: 15px;
    transition: all 0.3s;
}

.menu:hover {
    background-color: rgb(236, 220, 220);
}

.left .logo {
    height: 25px;
    cursor: pointer;

}

.middle {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: start;
}

.middle .search {
    width: 35px;
    height: 35px;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    background-color: rgb(236, 220, 220);
    transition: all 0.3s;
    z-index: 100;
}

.middle .search:hover {
    background-color: rgb(218, 195, 195);
}

.middle .btn-search {
    width: 15px;
    height: 15px;
}

.middle .search-box {
    flex: 1;
    padding: 15px 50px;
    margin-left: -40px;
    margin-right: -40px;
    border: none;
    border-radius: 50px;
    outline: 0;
    max-width: 600px;
    background-color: rgb(236, 220, 220);

}

.middle .filter {
    width: 35px;
    height: 35px;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    background-color: rgb(236, 220, 220);
    transition: all 0.3s;
}

.middle .filter:hover {
    background-color: rgb(218, 195, 195);
}

.middle .btn-filter {
    width: 15px;
    height: 15px;
}

.right {
    width: 250px;
    display: flex;
    align-items: center;
}

.right .help,
.right .settings,
.right .apps {
    width: 25px;
    padding: 10px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 5px;
}

.right img:hover {
    background-color: rgb(236, 220, 220);
}

.right .profile-picture {
    width: 35px;
    padding: 0px;
    cursor: pointer;
}

.right .profile-picture:hover {
    background: none;
}

.container {
    display: flex;
    flex-direction: row;
    padding: 0 10px;
    gap: 10px;
    height: 90vh;
    overflow: none;
}

#toggle {
    display: none;
}

.sidebar {
    width: 200px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: all 0.3s;

    border: none;
    border-right: 1px solid rgb(223, 224, 225);
    transition: all 0.3s;
    position: relative;
}

#toggle:not(:checked)+.sidebar {
    width: 65px;
    padding: 10px;

}


.compose {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: rgb(157, 236, 236);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s;
    max-width: 180px;
}

.compose:hover {
    background-color: rgb(147, 224, 224);
}

.compose .pen {
    width: 25px;
}

.navs {
    flex: 1;
}

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0 15px;
}


.sidebar li {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 7px;
    transition: all 0.3s;
}

.sidebar li:hover {
    background-color: rgb(236, 220, 220);

}

.sidebar ul a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: black;
}

.sidebar .sidebar-icon {
    width: 20px;
}

hr {
    border: none;
    border-bottom: 1px solid burlywood;
    margin: 20px 0;
}

.main {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    height: calc(80vh);
    scrollbar-width: none;
}

.nav {
    height: 15px;
    cursor: pointer;
}

.header-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 10px;
}

.left-nav {
    display: flex;
    width: 200px;
    justify-content: start;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;

}

.right-nav {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;
}

.header-navs {
    display: flex;
    gap: 5px;
}

.nav-right{
    width: 10px;
    height:10px;
}

.navigations {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    width: 200px;
    padding: 10px 20px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    cursor: pointer;
    margin-bottom: 20px;

}

.active {
    background-color: rgb(236, 220, 220);
    color: blue;
    border-bottom: 1px solid blue;
}

.navigations:hover {
    background-color: rgb(236, 220, 220);

}

.info-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.info-title.active,
.info-title:hover {
    color: blue;
}

.info {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: gray;
    margin-top: 5px;
}

.message-box {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    padding: 10px;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    border: 1px solid rgba(0, 0, 0, 0);
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
    background-color: white;

}

input {
    cursor: pointer;
}

.message-box:hover {
    border: 1px solid gray;
}

.sender {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 200px;
}

.message-middle {
    min-width: 100px;
    overflow: none;
    width: 100%;
    text-wrap: nowrap;
    overflow: hidden;
}

.title {
    font-weight: bold;
}

.title .message {
    font-weight: normal;
}

.time {
    display: flex;
    justify-content: end;
    width: 100%;
}


@media (max-width: 858px) {
    .sidebar {
        width: 65px;
        padding: 10px;
    }

    #toggle:not(:checked)+.sidebar {
        width: 200px;
        display: flex;
        position: fixed;
        height: 100vh;
        background-color: white;
    }




}


@media (max-width: 600px) {
   
    .sidebar {
        display: none;
        position: fixed;
    }

    #toggle:not(:checked)+.sidebar {
        width: 200px;
        display: flex;
        position: fixed;
        height: 100vh;
        background-color: white;
    }

    .container {
        display: block;
        padding: 0;
        position: fixed;
        overflow-y: auto;
    }

    .message-box {
        display: grid;
        grid-template-columns: 150px 150px 150px;
        min-width: 450px


    }

    input {
        cursor: pointer;
    }

    .message-box:hover {
        border: 1px solid gray;
    }

    .sender {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
        width: 130px;
    }

    .message-middle {
        min-width: 150px;
        overflow: none;
        width: 130px;
        text-wrap: nowrap;
        overflow: none;

    }

    .title {
        font-weight: bold;
    }

    .title .message {
        font-weight: normal;
    }

    .time {
        width: 100px;

    }

    .navigations {
        display: none;
    }

    .middle {
        display: none;
    }

    .right-nav{
        display: none;
    }
}
CSS

5. Making It dynamic with JS

You can make this layout dynamic by adding simple javascript:

JavaScript
document.getElementById("one").addEventListener("change", function() {
    if (this.checked) {
      document.getElementById("two").checked = true;
      document.getElementById("three").checked = true;
      document.getElementById("four").checked = true;
      document.getElementById("five").checked = true;
      document.getElementById("six").checked = true;


    }else{
        document.getElementById("two").checked = false;
      document.getElementById("three").checked = false;
      document.getElementById("four").checked = false;
      document.getElementById("five").checked = false;
      document.getElementById("six").checked = false;
    }
  });
JavaScript

6. Optional Enhancements

To push this design even further, consider:

  • Adding icons using Font Awesome
  • Creating email categories or filters with CSS tabs
  • Simulating email opening functionality with modals
  • Integrating with a fake JSON email API

7. What You’ll Learn

By building this Gmail UI clone, you’ll gain practical knowledge in:

  • Building reusable UI components
  • Applying modern layout techniques (Flexbox/Grid)
  • Working with spacing, alignment, and visual hierarchy
  • Responsive design principles
  • Clean UI and UX design practices

This type of project helps prepare you for real-world frontend tasks, such as building admin dashboards, inboxes, or content management systems.

8. Final Thoughts

Recreating the Gmail Inbox UI in HTML and CSS is a powerful exercise that blends creativity with structure. It teaches you how to think like a UI/UX designer while developing your frontend coding discipline.

Whether you’re building it as part of your portfolio or just for practice, this project demonstrates your understanding of clean, functional, and responsive design. Once you’re comfortable with the static version, try integrating simple JavaScript interactions — such as selecting multiple emails or marking them as read.

Search
Popular Tags
Table of Content

‒ Get a Quote

Looking For Web Developer?

Hire Me Now
As a small business owner, I had no idea how to build a website. But thanks to this guide, I was able to design my site on WordPress without hiring a developer. It looks professional, loads fast, and I can manage everything myself now. Highly recommended!
Ayaan Maxamed

Founder of Ayaan Boutique

App Design Web Design Simple Projects System Development
App Design Web Design Simple Projects System Development

‒ View Projects

View Other Projects

Gmail Inbox UI in HTML and CSS

Gmail Inbox UI with HTML & CSS: A Developer’s Guide
Google Search Page in HTML & CSS

Google Search Page Clone Using HTML & CSS (Step-by-Step)
App Design Web Design Simple Projects System Development
App Design Web Design Simple Projects System Development

Let"s Create an Amazing Projects Together!

Contact Me

‒ Contact Me

Let's Talk for Your Next Projetcs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  • Ust Maanka

  • Ust Maanka

  • 252 617 892189