JSFiddle - React, Tailwind, and code Playground

by aastudio

HTML

<div class="gs">
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
    <div class="g">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, odit dolore accusantium ab excepturi ut blanditiis amet consequatur.</div>
    </div>
</div>

CSS

.gs {
     font-size:0; /* kill the whitespace */
}
.g {
     display: inline-block;
     vertical-align: top; /* align boxes on top */
     width:23.5%;
     margin-left: 2%;
     margin-bottom: 20px;
     font-size: 16px; /* older browser */
     font-size: 1rem;
}
.g:first-child { margin-left: 0; }





/** demo **/
html {
    background-color: #fff;
}
body {
    font-family: 'Open Sans', sans-serif;
    width:100%;
    max-width:620px;
    margin: 0 auto;
    padding: 50px 0;
    background-color: #f66;
}
h1 {
    display: inline-block;
    font-size: 1em;
    margin: 0 0 -5px -15px;
    *position: relative; /* negative margin for IE6/7 */
    zoom: 1; /* negative margin for IE6/7 */
    padding: 0 5px;
    background-color: #fff;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform:rotate(-4deg);
    -webkit-box-shadow: 0 0 5px #999;
    box-shadow: 0 0 5px #999;
}
.g {
    border-radius: 10px;
    background-color: #cccc66;
}
.box {
    padding: 10px;
}