JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="wrapper transition-1">

    <div class="featuresColumn transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>

    <div class="featuresColumn transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
    
    <div class="featuresColumnWide last transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
    
</div>

<div class="wrapper transition-1">

    <div class="featuresColumn transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>

    <div class="featuresColumn transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
    
    <div class="featuresColumn transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
    
    <div class="features last transition-1">
        <p class="transition-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
    </div>
    
</div>

CSS

/* mobile first */

body { font: 87.5%/1.5em sans-serif }

p { margin: 0 0 1.5em 0; }

.wrapper{max-width:320px;overflow:hidden;width:90%;margin:12px auto;padding:0 5%; }
.featuresColumn {float: left; width: 100%; margin: 0 auto 12px auto;}
.featuresColumnWide {float: left; width: 100%;  margin: 0 auto 12px auto;}
.last {margin-right: 0}
        
@media only screen and (min-width: 480px) {

body {font: 98.5%/1.5 sans-serif}
.wrapper{max-width:480px;overflow:hidden;width:90%;margin:12px auto;padding:0 5%; }
.featuresColumn {float: left; width: 22%; margin-right: 4%;}
.featuresColumnWide {float: left; width: 48%; margin-right: 4%;}
.last {margin-right: 0}
}


@media only screen and (min-width: 768px) {

body { font: 1.25em/1.5 sans-serif }
.wrapper{max-width:768px;overflow:hidden;width:90%;margin:12px auto;padding:0 5%; }

} 

.transition-1{-webkit-transition:.1s linear all;-moz-transition:.1s linear all;-ms-transition:.1s linear all;-o-transition:.1s linear all;transition:.1s linear all;}