JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div id="tabbar">

</div>

<div id="s0">
    <div id="s2">
        <div class="tb">
            <div class="tc">
                <div id="a1">
                    <div class="tc">
                        
                        <h1><span>TEST</span></h1>
                       
                    </div>
                </div>
                <div id="a2">
                    <ul></ul>
                    <ul></ul>
                    <ul></ul>
                    <ul></ul>
                    <a class="x"></a>
                </div>
                <div id="a3">
                    <div class="tc">
                        <div id="w">
                            <div class="ht">HINT</div>
                            <div class="ht">HINT</div>
                            <div class="ht">HINT</div>
                            <div class="cl"></div>
                            <div class="b3">RESTART</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="s3">
        <div class="tb">
            <div class="tc">
                <h2>TEST!</h2>
                TEST<br><br>
                <form id="form" action="insert.php" method="post">
                    <input type="hidden" name="ID" value=""/>
                    <input type="hidden" name="Layout" value=""/>
                    <input type="hidden" id="stars" value="3" name="Stars" />    
                    Your score: <input type="text" id="score" name="Score" value="0" readonly /><br />
                    Your time: <input type="text" id="timer" name="Time" value="00:00" readonly /><br />
                    <div id="stars"><img src="images/3.png" alt=""></div>
                </form><br>
                <div class="ht">SHARE</div>
                <div class="cl"></div>
                <div class="b3">RESTART</div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html, body, #s1, .tc {height:100%}
body {
    font-family: gesta, 'gesta', arial, helvetica, sans-serif;
    -webkit-text-size-adjust:none;
    font-size: 55%;
    text-align: center;
    color: #FFF;
    text-shadow: 0 0 .2em rgba(0, 0, 0, .3);
}
li {list-style: none}
a , #p, #b1, .sc, .tm, .ht, .b3 {cursor: pointer}

.tb {display: table;width:100%;height:100%}
.tc {display: table-cell;text-align: center;vertical-align:middle}
#mw, li a, #a3 .b3, #s3 {position: absolute}
#mw, .cl {display: none}

#mw, #s3 {
    z-index: 9;
    background: gold;
    height: 270px;
    width: 460px;
}
.pw #s2 {background: rgba(255,0,0,.3);}
#s0 {
    float: left; 
    height: 270px;
    width: 460px;
    background: #222 url('images/bg.png');
}

#s2, #s3 {
    /*height: 100%;*/
    height: 270px;
    text-align: center;
}
#s3 p {font-size:1em;margin: 3em 0}
#a1 {
    text-align: center;
    white-space: nowrap;
}
#a1, #w {position:relative}
#a1 .tc > * {
    display: inline-block;
    vertical-align: middle;
}
#a1 h1 {margin: 0 .3em}
#a1, #a3 {width: 100%;    display: table}
#a2 {position: relative}
#w {width: 16em;text-align:left;margin:auto;height:2em}

h1 {
    font-family: legitima,'times new roman',serif;
    font-size: 3.3em;
    font-weight: normal;
    line-height: .7em;
}

p {
    font-size:.6em; line-height: 1.2;
}
p a {color:#75d0d6;text-decoration: none}
#a3 .b3 {right:0; top:0}
#mw .b3, #mw #b1 {margin-top:1em;}

.b3, #b1, .ht {
    display: inline-block;
    width: 6em;
    line-height: 2em;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    color:#FFF;
    border-radius: .4em;
    -webkit-box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    box-shadow:hsl(75, 80%, 15%) 0 .38em .08em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
   ...