JSFiddle - React, Tailwind, and code Playground

by tomasjurman

HTML

<div class="main">
    <section>
        <h3>Product 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
    <section>
        <h3>Product 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
    <section>
        <h3>Product 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
    <section>
        <h3>Product 4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
    <section>
        <h3>Product 5</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
    <section>
        <h3>Product 6</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, urna sed blandit dapibus, justo mi rutrum turpis, eget dignissim diam nisi et ipsum. Quisque at ultricies nisl,</p>
    </section>
    
</div>

CSS

.main {
    background: #333;
    padding: 0;
    margin: 0;
    list-style: none;					
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content:space-between;
    align-items:flex-start;
}

section{
    background: green;
    width:200px;
    padding: 5px;	
    display: block;
    margin-bottom: .5em;
}