JSFiddle - React, Tailwind, and code Playground

by volcanicpixels

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Enigmatic 1.1</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Rationale|Varela+Round|Voltaire' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <section id="top">
            <h1>Enigmatic <span>1.1</span></h1>
        </section>
        <section id="left">
            <div class="inner">
                <div class="quickview"><span class="subject">Stats</span></div>
                <nav>
                    <div class="item">Main</div>
                    <div class="item">Cipher</div>
                    <div class="item">Statistics</div>
                    <div class="item">Reference</div>
                </nav>
            </div>
        </section>
        <section id="right">
            <div class="inner">
                <section id="main-window">
                    <div class="content-box">
                        <h2>Cipher Text</h2>
                        <textarea></textarea>
                    </div>
                    <div class="button">Update</div>
                    <div class="button">Auto-Solve</div>
                </section>
            
                <section id="cipher-window">
            
                </section>
                <section id="stats-window">
            
                </section>
                <section id="reference-window">
            
                </section>
            </div>
        </section>
    </body>
</html>

CSS

body, html {
    height:100%;
    padding:0;
    margin:0;
}

body
{
    background:url(images/grillleft.png) left center no-repeat, url(images/grillright.png) right center no-repeat, #020403;
    font-family: 'Rationale', sans-serif;
    color:#daeadf;
    text-transform:uppercase;
    -webkit-user-select:none;
}
#top 
{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:100px;
}
#left
{
    position:fixed;
    top:100px;
    bottom:0px;
    left:10%;
    width:25%;
    -webkit-perspective: 300;
}
#left .inner
{
    -webkit-transform: rotateY(20deg);
    -webkit-transform-origin: -100px 0;
    -webkit-transform-origin-x: -100px;
    -webkit-transform-origin-y: 0px;
}
#right
{
    position:fixed;
    top:100px;
    bottom:0px;
    right:10%;
    width:50%;
    -webkit-perspective: 300;
}
#right .inner
{
    -webkit-transform: rotateY(20deg);
    -webkit-transform-origin: -100px 0;
    -webkit-transform-origin-x: -100px;
    -webkit-transform-origin-y: 0px;
}
h1
{
    font-family: 'Rationale', sans-serif;
    font-weight:normal;
    color:#daeadf;
    font-size:43px;
    text-transform:uppercase;
    text-shadow: 0 -1px 0 white;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin-top:15px;
}