Admin Dashboard clean and responsive

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
  <div class="dashboard">
    
    <div class="sidebar">
      <div class="logo">Admin Panel</div>
      <ul>
        <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
        <li><a href="#"><i class="fas fa-users"></i> Users</a></li>
        <li><a href="#"><i class="fas fa-box"></i> Products</a></li>
        <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
        <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
      </ul>
    </div>

<div class="main-content">
      
      <div class="header">
        <div class="header-left">
          <h1>Dashboard</h1>
        </div>
        <div class="header-right">
          <div class="search-bar">
            <input type="text" placeholder="Search...">
            <i class="fas fa-search"></i>
          </div>
          <div class="notifications">
            <i class="fas fa-bell"></i>
            <span class="badge">3</span>
          </div>
          <div class="user-profile">
            <img src="https://via.placeholder.com/40" alt="User">
            <div class="dropdown">
              <a href="#">Settings</a>
              <a href="#">Logout</a>
            </div>
          </div>
        </div>
      </div>

<div class="content">
        <div class="card">
          <h2>Users</h2>
          <button id="add-user-btn" class="btn">Add User</button>
          <table id="user-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

<div id="add-user-modal" class="modal">
    <div class="modal-content">
      <span class="close">×</span>
      <h2>Add User</h2>
      <form id="user-form">
        <label for="name">Name</label>
        <input type="text" id="name" required>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <label for="role">Role</label>
        <input type="text" id="role" required>
        <button type="submit">Save</button>
      </form>
    </div>
  </div>

CSS

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
  }
  
  body {
    background-color: #f4f7fa;
    color: #333;
  }
  
  .dashboard {
    display: flex;
    min-height: 100vh;
  }
  
  /* Sidebar */
  .sidebar {
    width: 250px;
    background-color: #2c3e50;
    color: #fff;
    padding: 20px;
  }
  
  .sidebar .logo {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
  }
  
  .sidebar ul {
    list-style: none;
  }
  
  .sidebar ul li {
    margin: 15px 0;
  }
  
  .sidebar ul li a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  
  .sidebar ul li a i {
    margin-right: 10px;
  }
  
  .sidebar ul li.active a {
    color: #1abc9c;
  }
  
  /* Main Content */
  .main-content {
    flex: 1;
    background-color: #f4f7fa;
  }
  
  /* Header */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .header-left h1 {
    font-size: 24px;
    font-weight: 700;
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .search-bar {
    position: relative;
    margin-right: 20px;
  }
  
  .search-bar input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 200px;
  }
  
  .search-bar i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
  }
  
  .notifications {
    position: relative;
    margin-right: 20px;
    cursor: pointer;
  }
  
  .notifications .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
  }
  
  .user-profile {
    position: relative;
    cursor: pointer;
  }
  
  .user-profile img {
    border-radius: 50%;
  }
  
  .user-profile .dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
    z-index: 1;
  }
  
  .user-profile .dropdown a {
    display: block;
    padding: 5px 0;
    color: #333;
    text-decoration: none;
  }
  
  .user-profile:hover .dropdown {
    display: block;
  }
  
  /* Content */
  .content {
    padding: 20px;
  }
  
  .card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card h2 {
    margin-bottom: 20px;
  }
  
  .btn {
    padding: 8px 16px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .btn:hover {
    background-color: #16a085;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  table th, table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  table th {
    background-color: #f8f9fa;
  }
  
  table tr:hover {
    background-color: #f1f1f1;
  }
  
  /* Modal */
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    position: relative;
  }
  
  .modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
  }
  
  .modal h2 {
    margin-bottom: 20px;
  }
  
  .modal form label {
    display: block;
    margin-bottom: 5px;
  }
  
  .modal form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .modal form button {
    width: 100%;
    padding: 10px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .modal form button:hover {
    background-color: #16a085;
  }

JS

// Sample Data
let users = [
    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
  ];
  
  // DOM Elements
  const userTable = document.getElementById("user-table").getElementsByTagName("tbody")[0];
  const addUserBtn = document.getElementById("add-user-btn");
  const addUserModal = document.getElementById("add-user-modal");
  const closeModal = document.querySelector(".close");
  const userForm = document.getElementById("user-form");
  
  // Render Users Table
  function renderUsers() {
    userTable.innerHTML = "";
    users.forEach((user) => {
      const row = userTable.insertRow();
      row.innerHTML = `
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
        <td>${user.role}</td>
        <td>
          <button onclick="editUser(${user.id})">Edit</button>
          <button onclick="deleteUser(${user.id})">Delete</button>
        </td>
      `;
    });
  }
  
  // Add User
  addUserBtn.addEventListener("click", () => {
    addUserModal.style.display = "flex";
  });
  
  closeModal.addEventListener("click", () => {
    addUserModal.style.display = "none";
  });
  
  userForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const role = document.getElementById("role").value;
  
    const newUser = {
      id: users.length + 1,
      name,
      email,
      role,
    };
  
    users.push(newUser);
    renderUsers();
    addUserModal.style.display = "none";
    userForm.reset();
  });
  
  // Edit User
  function editUser(id) {
    const user = users.find((user) => user.id === id);
    if (user) {
      document.getElementById("name").value = user.name;
      document.getElementById("email").value = user.email;
      document.getElementById("role").value = user.role;
      addUserModal.style.display = "flex";
  
      userForm.onsubmit = (e) => {
        e.preventDefault();
        user.name = document.getElementById("name").value;
        user.email = document.getElementById("email").value;
        user.role = document.getElementById("role").value;
        renderUsers();
        addUserModal.style.display = "none";
        userForm.reset();
      };
    }
  }
  
  // Delete User
  function deleteUser(id) {
    if (confirm("Are you sure you want to delete this user?")) {
      users = users.filter((user) => user.id !== id);
      renderUsers();
    }
  }
  
  // Initial Render
  renderUsers();

Admin Dashboard clean and responsive

Recommended

Responsive CSS Navbar

CodePen Home Stars and Warp Speed

A Code by alejandrokundrah

HTML

CSS

JS

Recommended

Responsive CSS Navbar

CodePen Home Stars and Warp Speed

A Code by alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS