JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris.<p>Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea. Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, ut dicat impetus partiendo vim. Ei magna velit eripuit duo, tamquam feugiat molestiae quo an, mea primis putant persequeris et. Nec te utinam adipiscing. His te illum posse. Ne mel detracto splendide referrentur. Ea mel everti concludaturque, ne nam alia reque. Vim apeirian iracundia ea, ea solum oratio oporteat duo, scaevola mandamus eu vel. Consul verear usu eu.<p>Sit duis percipit ne. Per autem constituam id. In has melius virtute, sea probatus assentior id. Electram assueverit dissentiet eu pro. Ut sanctus dolorum vel. Ex cibo deserunt vim, utinam laudem vel id. Vim nostrum signiferumque ei, ad duo aliquip oporteat splendide. Mel verear legendos no. Nec posse animal incorrupte an, no denique molestie expetendis vis. Nonummy habemus maluisset ex cum. Voluptatibus reprehendunt te eam, pri ne commodo suavitate. Simul inermis dolorem est et. Natum scaevola est et, at eos mollis vidisse convenire. Eum modus zzril consulatu ut.<p>Eum graeci senserit theophrastus an, aeterno lucilius posidonium eos no. Et vix...

CSS

#menu {
    width: 90px;
    background: #eee;
position: fixed;
top: 10px;
left: 10px;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 3px 5px;
}
#menu h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
}
#menu a {
    background: #333;
    text-decoration: none;
    color: white;
}
#menu a:hover {
    color: white;
    background: #555;
}
#menu li {
    position: relative;
}
#menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
}
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
    display: none;
}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
    display: block;
}


*
{
    margin:0;
    padding:0;
}
body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
a,a:visited
{
    text-decoration:none;
    outline:none;
    color:#a00;
}
a:hover
{
    color:#fff;
}
footer
{
    background:#D3A76F;
    position:fixed;
    width:100%;
    border-top:1px solid #333;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:1px 2px 0 #000;
}
footer h2
{
    font:25px/26px Acens;
    font-weight:bold;
    left:70%;
    margin:0px 0 0 150px;
    padding:20px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
-moz-box-shadow:0px 0px 20px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;    
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
    border:none;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred
{
   ...