JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<link
  crossorigin="anonymous"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
  integrity="sha512-hfp7UiPWaDAND/ZE+RrbMpthca5iYNxJl/uWQTOqeZqur4C6Y/kiDUsBKoUeQTvyz6EJFyDrtPefVpidGFzk+Q=="
  referrerpolicy="no-referrer"
  rel="stylesheet"
/>

<script
  crossorigin="anonymous"
  integrity="sha512-v80Z62SYCVHA3UxmFG69Vclopt+3ngQDocRjtxnB3htcTs6l9mnXc6SixuDae1rJ3L2J6p2KAuG+soHbhVd+6g=="
  referrerpolicy="no-referrer"
  src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"
></script>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<div class="container">
  <table class="table-of-users">
    <caption>
      <button
        class="Users"
        id="users_add"
        onclick="users_add()"
        title="Add users"
      >
        Add User
      </button>
      <h2>Users</h2>
    </caption>
    <tbody>
      <tr>
        <th><input type="checkbox" id="checkAll" /></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>E-mail</th>
        <th>Rol</th>
        <th>Registration Date</th>
        <th>Options</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox" name="1" value="1" /></td>
        <td class="fname">Imri</td>
        <td class="lname">Paloja</td>
        <td class="uname">imri</td>
        <td class="email">[email protected]</td>
        <td class="role">Owner</td>
        <td...