JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <div class="table-responsive body-manage-attendees">
        <table class="table table-hover">
            <thead>
                <tr>
  <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left">Amanda Doe</td>
                    <td class="number1">250</td>
                    <td class="table1">2</td>
                    <td class="right-bill">Bill</td>
                </tr>
                <tr>
                    <td class="left">Andy Doe</td>
                    <td class="number1">14</td>
                    <td class="table1">1</td>
                    <td class="right-bill">Bill</td>
                </tr>
              
            </tbody>
        </table>
    </div>

CSS

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.dropdown a {
    color: #676767;
    font-weight: bold;
    font-size: 14px;
}

.dropdown li {
    padding-left: 20px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

.body-manage-attendees {
    width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    border: 1px solid white;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    border: 1px solid white;
    color: black;
}

.body-manage-attendees .right-unapid {
    padding-left: 1%;
    color: white;
    text-align: center;
    border: 1px solid white;
    background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
    padding-left: 1%;
    color: white;
    text-align: center;
    border: 1px solid white;
    background-color: #10314C;
}

.square {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid white;
    margin-right: 5%;
    height: 15px;
    width: 15px;
    vertical-align: middle;
}

.square.white {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid white;
    background-color: white;
    height: 15px;
    margin-right: 10%;
    width: 15px;
    vertical-align: middle;
}

.right-itemswaiting...