JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<img src="data:image/gif;base64,R0lGODlhAQABAIAAACIiIgAAACwAAAAAAQABAAACAkQBADs=" class="box b1" width="100" height="100" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAACIiIgAAACwAAAAAAQABAAACAkQBADs=" class="box b2" width="100" height="100" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAACIiIgAAACwAAAAAAQABAAACAkQBADs=" class="box b3" width="100" height="100" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAACIiIgAAACwAAAAAAQABAAACAkQBADs=" class="box b4" width="100" height="100" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAACIiIgAAACwAAAAAAQABAAACAkQBADs=" class="box b5" width="100" height="100" />

<img class="header" alt=""...

CSS

html {
    font-size: 95%;
    
    background: #f7f7f7;
    
    -webkit-font-smoothing: subpixel-antialiased;
     -khtml-font-smoothing: subpixel-antialiased;
       -moz-font-smoothing: subpixel-antialiased;
        -ms-font-smoothing: subpixel-antialiased;
         -o-font-smoothing: subpixel-antialiased;
            font-smoothing: subpixel-antialiased;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
    zoom:1;
}

body {
    
    margin: auto;
    padding: 4em 2em;
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    line-height: 1.2em;
    color: #555;
    text-shadow: rgba(255,255,255,0.6) 0px 1px 0px;
    
    background: rgba(247,247,247,0.75);
    border: rgba(247,247,247,0.4) 0.5em solid;
}

p {
    margin: 1.2em 0em;
    text-align: justify;
}

.header {
    margin-bottom: 1em;
    width: 100%;
}

::selection {
    background: #6bf;
}

.button {
    display: inline;
    display: inline-block;
    position: relative; z-index: 20;
    
    min-width: 54px;
    height: 1.2em;
    padding: .75em 1em;
    margin: 0em 1em 0em 0em;
    text-align: center;
    font-weight: 500;
    font-size: 0.9em;
    line-height: 1.1em;
    cursor: pointer;
    text-decoration: none;
    
    color: #fff;
    text-shadow: rgba(0,0,0,0.05) 0em 0.1em 0.1em;
    background: #da4c66;
    border-radius: 0.2em;
    -webkit-transition: linear 0.2s all;
     -khtml-transition: linear 0.2s all;
       -moz-transition: linear 0.2s all;
        -ms-transition: linear 0.2s all;
         -o-transition: linear 0.2s all;
            transition: linear 0.2s all;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.button:before {
    content: "";
    position: relative; display: block;
    z-index: 10;
    
    width: 100%;
    height: 100%;
    padding: 1.4em 1.6em 0.7em...