JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>
    
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. 
            </p>
        </div>
    
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
    
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
    
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. 
            </p>
        </div>
    
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut...

CSS

body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
    width: 100%;
    max-width: 960px;
    min-width: 240px;
    margin: 0px auto;
}

#columns {
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-gap: 10px;
    column-fill: auto;
}

.pin {
    float: left;
    width: 33.33%;
    min-width:240px;
    text-align: center;
    background-color: white;
    -moz-box-shadow: 1px 1px 1px #e5eaed;
    -webkit-box-shadow: 1px 1px 1px #E5EAED;
    box-shadow: 1px 1px 1px #E5EAED;
    overflow:hidden;
    display: inline-block;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 10px 10px 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    position:relative;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
    
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
   width: 100%;
height: auto;
border-bottom: 1px solid #CCC;
padding-bottom: 15px;
margin: 0 0 5px 0px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
@media (min-width: 321px) and (max-width: 640px) {
    #columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
@media (min-width: 641px) and (max-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 961px) and (max-width: 1024px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
   ...