users.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Sumit Saha" />
    <meta name="owner" content="learnwithsumit.com" />
    <title>Title</title>
    <link rel="shortcut icon" href="./images/favicon.png" />
    <link rel="stylesheet" href="./stylesheets/toastify.css" />
    <link rel="stylesheet" href="./stylesheets/style.css" />
    <script src="./js/toastify.js"></script>
  </head>
  <body>
    <div class="menu">
      <div class="menu-item"><a href="/inbox">Inbox</a></div>
      <div class="menu-item"><a href="/users">Users</a></div>
      <div class="menu-item"><a href="/">Login</a></div>
    </div>

    <div class="manageUser-container">
      <div id="title">
        <h2>Manage Users</h2>
      </div>

      <div class="new-message-container new-user">
        <a href="#" onclick="openModal()">+</a>
      </div>

      <div id="users-table">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Manage</th>
            </tr>
          </thead>
          <tbody id="users-table">
            <tr id="">
              <td class="name">
                <img src="./images/user1.png" />
                <span>User 1</span>
              </td>
              <td>email@email.com</td>
              <td class="manage">
                <img src="./images/trash.png" alt="Delete" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="modal-wrapper" id="add-user-modal">
      <div class="modal">
        <a href="#" onclick="closeModal()" class="modal-close">+</a>
        <div class="modal-title">
          <h2>Create New User</h2>
        </div>
        <div class="modal-body">
          <form id="add-user-form">
            <input type="text" placeholder="enter name" name="name" />
            <p class="error show">This is error</p>
            <input type="text" placeholder="enter email" name="email" />
            <input type="text" placeholder="enter mobile" name="mobile" />
            <input
              type="password"
              placeholder="enter password"
              name="password"
            />
            <input type="file" name="avatar" />
            <input type="submit" value="Submit" />
          </form>
        </div>
      </div>
    </div>
    <script>
      const modal = document.querySelector("#add-user-modal");
      function closeModal() {
        modal.style.display = "none";
      }
      function openModal() {
        modal.style.display = "block";
      }
    </script>
  </body>
</html>