JSFiddle - React, Tailwind, and code Playground

by secondfre

HTML

<div class="wrapper">

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

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

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

<div class="wrapper">

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

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

</div>

CSS

.wrapper {overflow: hidden; width: 700px; background: #eee; margin-bottom: 3%; }
.grid {float: left; width: 21%; margin: 2%;}
.grid2 {float: left; width: 29.333%; margin: 2%;}