JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <title>2 Column CSS Layout</title>
       
    </head>
    
    <body>
        <div id="page">
            <div id="header">
                <div style="float: left;">Welcome user</div>
                <div style="float: right;">
<a onclick="logout()" href="#">Logout</a>

                </div>
            </div>
            <div id="nav">
                <ul id="nav">
                    <li style="border-left: 1px solid #ccc;"><a href="index.php">Home Page</a>

                    </li>
                    <!-- -->
                    <li><a href="profile.php">My Account</a>

                    </li>
                    <!-- -->
                    <li><a href="profile_update.php">Update Profile</a>

                    </li>
                    <!-- -->
                    <li><a href="profile_pic.php">Change Avatar</a>

                    </li>
                    <!-- -->
                    <li><a href="profile_pass.php">Change Password</a>

                    </li>
                    <!-- -->
                    <li><a href="#">Support</a>

                    </li>
                </ul>
            </div>
            <div id="content">
                <div class="table">
                    <div class="table-head">
                        <div data-label="select" class="column"><input type="checkbox" id="selectall"/></div>
                        <div data-label="id" class="column">ID</div>
                        <div data-label="avatar" class="column">Avatar</div>
                        <div data-label="username" class="column">Username</div>
                        <div data-label="email" class="column">Email</div>
                        <div data-label="active" class="column">Active</div>
                        <div data-label="level" class="column">Level</div>
                        <div data-label="modify" class="column">Modify</div>
                    </div>
                    <div class="row">
             ...

CSS

body {
                margin:20px;
                font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
                background-color:#555
            }
            #page {
                background-color:#fff;
                margin:0 auto;
                text-align:left;
                width:755px;
                padding:0 10px
            }
            #header {
                border-bottom:0px solid #000;
                height:30px;
                line-height:30px
            }
            /* Begin Navigation Bar Styling */
            #nav {
                text-align:center;
                line-height: 30px;
            }
            #nav ul {
                text-align:center;
                font-size:11px;
                width:100%;
                margin:0;
                padding:0;
                display:inline-block;
                list-style:none;
                background-color:#f2f2f2;
                border-bottom:1px solid #ccc;
                border-top:1px solid #ccc
            }
            #nav li {
                margin:auto;
                display:inline-block
            }
            #nav li a {
                display:block;
                padding:8px 15px;
                text-decoration:none;
                font-weight:700;
                color:#069;
                border-right:1px solid #ccc
            }
            #nav li a:hover {
                color:#c00;
                background-color:#fff
            }
            /* End navigation bar styling. */
            #content {
                align-items:center;
                width:100%;
                display: flex;
                padding: 30px 0;
            }
            #content p {
                margin: 0 auto;
                text-align: center;
                vertical-align: middle;
            }
            #footer {
                height:30px;
                line-height:30px;
               ...

JavaScript

$('#selectall').on('click', function() {
                $('.selectedId').prop('checked', this.checked);
            });