JSFiddle - React, Tailwind, and code Playground

HTML

<div class="popup none opacity">
    <h3>Бронь ID 351</h3>
    <div class="dateofbron">Номер был забронирован <span>01-11-2016</span></div>
    <img src="/img/cross.png" alt="" class="cross">
    <div class="left lpop">
        <div class="pn">Название номера</div>
        <div class="pt popformname">Эконом</div>
        <div class="pn">Дата заезда</div>
        <div class="pt">10.20.2015</div>
        <div class="pn">Дата съезда</div>
        <div class="pt">25-11-2016</div>
        <div class="pn">На сколько дней</div>
        <div class="pt">6 дней</div>
    </div>
    <div class="left">
        <div class="pn">Имя постояльца</div>
        <div class="pt">Иван</div>
        <div class="pn">Номер телефона</div>
        <div class="pt">+71231232233</div>
        <div class="pn">Стоимость проживания</div>
        <div class="pt">18 000 рублей</div>
        <div class="pn">Способ бронирования</div>
        <div class="pt">Online бронирование</div>
    </div>
    <div class="clear"></div>
    <a class="popbtn edit">Редактировать бронь</a>
    <a class="popbtn del">Удалить бронь</a>
</div>
<div class="night none"></div>
<div class="a-wrap rel">
    <h1>Админ панель</h1>
    <a href="" class="exit">Выход</a>
    <div class="nav">
        <a href="admin.html" class="navbtn navactive">Брони</a>
        <a href="adminnewborn.html" class="navbtn">Забронировать номер</a>
        <a href="adminall.html" class="navbtn">Все номера</a>
        <a href="adminlog.html" class="navbtn">Логи</a>
    </div>

    <div class="box">
        <h2>Текущие забронированные номера</h2>
    <table>
    <tr class="tablecat">
        <td>ID</td>
        <td>Номер</td>
        <td>Заезд</td>
        <td>Съезд</td>
        <td>Фамилия Имя</td>
        <td>Телефон</td>
    </tr>
    <tr class="molchanov">
        <td class="formid">4</td>
        <td>Эконом</td>
        <td class="formdate">10.01.2017</td>
        <td class="formdate">15.01.2017</td>
        <td>Иван Иванович</td>
       ...

CSS

body {
	background: #EEF2F3;
	margin: 0;
}

* {-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.clear {clear: both;}
.opacity {opacity: 0;}
.none {display: none}
.rel {position: relative;}


.a-wrap {
	width: 900px;
	margin: 0 auto;
}

.night {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 2;
    opacity: 0.6;
}

h1 {
	font: 36px/180px text;
    padding-left: 70px;
    margin: 0;
}

.nav {
	padding-left: 70px;
	margin-bottom: 45px;
}

.navbtn {
    background: #6ebbf3;
    padding: 10px 25px;
    border-radius: 60px;
    color: white;
    text-decoration: none;
    font: 14px med;
    margin-right: 25px;
}

.navactive {
    background: #1D9CF7 !important;
    box-shadow: 0 6px 15px #cad2d4;
}

.navbtn:hover {
	background: #4badf3;
	box-shadow: 0 6px 15px #cad2d4;
}

.exit {
    position: absolute;
    right: 0;
    top: 75px;
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 40px;
    text-decoration: none;
    color: #333;
    font: 14px sbold;
}

.exit:hover {
	background: #333;
	color: white;
}

.forlog tr td:last-child{
    width: 80%;
}

h2 {
    font: 24px text;
    margin: 0 0 50px 0;
    color: #767676;
}

.box{
    width: 760px;
    padding: 70px 70px 105px;
    background: white;
}

table {
    width: 760px;
    display: table;
    border-collapse: separate;
    border-spacing: 1px !important;
    border-color: black;
}

td {
    padding-left: 10px;
}

.tablecat {
    font: 14px bold;
    text-transform: uppercase;
    color: #777;
    height: 40px;
    background: none;
}

.tablecat:hover {
	color: #777;
}

.tablecat td {
	background: none;
	text-align: left ;
}

tr {
    height: 55px;
    font: 17px med;
    color: #333;
    cursor:pointer;
    -webkit-transition: all 0.05s ease-in-out;-o-transition: all 0.05s ease-in-out;-moz-transition: all 0.05s ease-in-out;transition: all 0.05s ease-in-out;
}

tr:hover...

JavaScript

document.querySelectorAll('.formdate').forEach(function(el, index, arr){el.innerText = el.innerText.split('-').reverse().join('.');})

$(".molchanov").click(function(){
$(".night").removeClass('none');
setTimeout(function(){$(".night").addClass('nightcvet')}, 250);
$(".popup").removeClass('none');
setTimeout(function(){$(".popup").removeClass('opacity')}, 250);
});

$(".cross").click(function(){
$(".night").removeClass('nightcvet')
setTimeout(function(){$(".night").addClass('none');}, 250);
$(".popup").addClass('opacity')
setTimeout(function(){$(".popup").addClass('none');}, 250);
});

$(".night").click(function(){
$(".night").removeClass('nightcvet')
setTimeout(function(){$(".night").addClass('none');}, 250);
$(".popup").addClass('opacity')
setTimeout(function(){$(".popup").addClass('none');}, 250);
});