JSFiddle - React, Tailwind, and code Playground

by alinktothepast

HTML

<div class="container">
    <div class="container">
    <div class="header">BLAH BLAH BLAH</div>
    <div class="leftNav">
        <table name="NavTable">
            <tr>
                <th class="NTo">Blah</th>
            </tr>
            <tr>
                <th class="NTt">Blah</th>
            </tr>
                        <tr>
                <th class="NTo">Blah</th>
            </tr>
            <tr>
                <th class="NTt">Blah</th>
            </tr>
                        <tr>
                <th class="NTo">Blah</th>
            </tr>
            <tr>
                <th class="NTt">Blah</th>
            </tr>
        </table>
</div>
    <div class="leftWrapper">
        Username: <input type="text" name="User"><br>Password: <input type="text" name="Pass"><br><input type="button" name="login" value="Sign in" onClick="fu()" />
</div>
    <div class="rightWrapper">
    Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah     Blah blah blah blah blah blah blah blah blah blah...

CSS

body {
    background-color: #FFF;
    opacity: 1.0;
}
.container {
    background-color: #655719;
    z-index: 2;
    top: 0;
    border: solid 3px #000;
    width: 980px;
    position: relative;
    overflow: hidden;
    margin: auto;
}
.header {
    background-color: #FFEA8A;
    width: 980px;
    margin: 10px;
    color: #000;
    opacity: 1.0;
    text-shadow: 1px 1px 4px #e7e, -7px 7px 4px #bbb;
    font-size: 72px;
    font-family: sans-serif;
    text-align: center;
}

.leftNav {
    background-color: #4B7F68;
    float: left;
    margin: 10px;
}
table {
    border:solid 4px #000;
    color: white;
    font-size: 40px;
    font-family: sans-serif;
    width: 180px;
}
tr {
    border:solid 4px #000;
    font-size: 40px;
    font-family: sans-serif;
}
.NTo {
    background-color: #3E3DB2; 
    border:solid 4px #000;
    font-size: 40px;
    font-family: sans-serif;
}
.NTt {
    background-color: #0F0F65;
    border:solid 4px #000;
    font-size: 40px;
    font-family: sans-serif;
    margin: 1px;
}
th:hover {
    background-color: #000;
}
.leftWrapper {
    background-color: #B29D3D;
    margin: 10px;
    float: left;
    width: 270px;
}
input[type="text"]
{
width:150px;
display:block;
margin: 5px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
.rightWrapper {
    background-color: #8B8AFF;
    margin: 10px;
    float: left;
    width: 467px;
}

JavaScript

function fu()
    alert("Fuck you");
}