JSFiddle - React, Tailwind, and code Playground

by aljordan82

HTML

<div class="outer">
    <div id="sidebar">
        <ul>
            <li><a href="./index.php?mode=admin">Manage Players</a>

            </li>
            <li><a href="./index.php?mode=admin&amp;i=admins">Administrators</a>

            </li>
            <li><a href="./index.php?mode=admin&amp;i=chatlog">Chat Log</a>

            </li>
            <li><a href="./index.php?mode=admin&amp;i=adminlog">Administration Log</a></li>
            <li><a href="./index.php?mode=admin&amp;i=pcplog">PCP Log</a></li>
            <li><a href="./index.php?mode=admin&amp;i=moderate">Punish a Player</a>

            </li>
            <li><a href="./index.php?mode=admin&amp;i=market">Marketplace Manager</a>

            </li>
        </ul>
    </div>
    <div class="container">
        <form action="?mode=admin&amp;i=body" method="post">
            <table width="50%" align="center">
                <caption>Enter the name of the player you want to manage.</caption>
                <tr>
                    <td>Player name:</td>
                    <td>
                        <input type="text" name="player_name" id="player_name" pattern="^[A-Za-z]+[_ ]{1}[A-Za-z]+$" required />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" name="submit" value="Search" />
                    </td>
                </tr>
            </table>
        </form>
        <table class="log" width="70%" align="center">
            <caption>Recent searches</caption>
            <tr>
                <th>Searched player</th>
                <th>Search issuer</th>
                <th>Time</th>
            </tr>
            <tr>
                <td><a href="index.php?mode=admin&amp;i=player_manage&amp;u={searchrow.PLAYER_ID}">test</a>

                </td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
</div>
<div...

CSS

body {
	height: 100%;
	background: #FFF url('./images/bg-site.png') repeat;
	margin: 0;
	min-width: 980px;
	padding: 0;
	font-size: 10px;
	font-family: 'ubuntulight';
	color: #333333;
}

a, a:active, a:hover, a:visited {
	color: inherit;
	text-decoration: none;	
}

#sidebar {
	width: 19%;
	min-width: 180px;
	max-width: 275px;
	height: 90%;
	position: fixed;
	left: 0;
	top: 50px;
	bottom: 28px;
	background: #146edd url("images/sidemenu-bg-admin.jpg") repeat-x;
	box-shadow: inset -6px 6px 6px -2px #1058b0;
	font-family: 'ubuntulight';
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;	
}

#sidebar ul li {
	width: inherit;
	padding: 12px 0 12px 20px;
	font-size: 1.7em;
	color: #f0f3ff;
	cursor: pointer;
	border-bottom: 1px solid #0d5bba;
}

#sidebar ul li.first {
	margin-top: 5px;	
}

#sidebar ul li:hover {
	background: #1263c7;
	-webkit-transition: background 200ms linear;
	-moz-transition: background 200ms linear;
	-o-transition: background 200ms linear;
	-ms-transition: background 200ms linear;
	transition: background 200ms linear;
}

#sidebar a {
	display: block;	
}

#sidebar .current {
	background-color: #1263c7;	
	-webkit-box-shadow: inset 0px 0px 5px 1px #0f5bb9;
	-moz-box-shadow: inset 0px 0px 5px 1px #0f5bb9;
	box-shadow: inset 0px 0px 5px 1px #0f5bb9;
}

#copyright {
	position: fixed;
	left: 6px;
	bottom: 6px;
	z-index: 50;
	font-weight: bold;
}

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.imaginary-container {
	width: 270px;
	height: 90%;
	border: 1px solid #000;	
}

.container {
	width: 100%;
	height: auto;
	background-color: #FFF;
	-webkit-box-shadow: 0 0 3px #aaaaaa;
	-moz-box-shadow: 0 0 3px #aaaaaa;
	box-shadow: 0 0 3px #aaaaaa;
	text-align: center;
	margin: 50px 21px 28px 180px !important;
}

.container table {
	margin: 50px auto 50px auto;	
}

.container th {
	font-size: 20px;	
	text-align: left;
	width: 30%;
	font-variant: small-caps;
	color: #d64e1e;
	text-decoration:...