JSFiddle - React, Tailwind, and code Playground

by thierrykoblentz

HTML

<h2>Layout A</h2>

<div class="Layout-A">
    <div>1</div><!--    
 --><div>2</div><!--
 --><div>3</div>    
</div>    

<h2>Layout B</h2>

<div class="Layout-B">
    <div>1</div><!--    
 --><div>2</div><!--
 --><div>3</div><!--
 --><div>4</div>    
</div>  

<h2>Layout C</h2>

<div class="Layout-C">
    <div>1</div><!--    
 --><div>2</div><!--
 --><div>3</div><!--
 --><div>4</div>    
</div>

CSS

div {
    outline: 1px solid teal;
}
div > div {
    height: 100px;
}
@media screen and ( min-width: 500px ) {
    .Layout-A > :nth-child(1),
    .Layout-A > :nth-child(2) { 
        display: inline-block; 
        width: 50%;
    }
    .Layout-B > * {
        width: 50%;
        display: inline-block;
    }
    .Layout-C > * {
        display: inline-block;
    }
    .Layout-C > :nth-child(1),
    .Layout-C > :nth-child(4) { 
        width: 25%;
    }
    .Layout-C > :nth-child(2),
    .Layout-C > :nth-child(3) { 
        width: 75%;
    }
}  
@media screen and ( min-width: 900px ) {
    .Layout-A > *,
    .Layout-B > * {
        display: inline-block;
    }
    .Layout-A > :nth-child(1),
    .Layout-A > :nth-child(2),
    .Layout-A > :nth-child(3) { width: 33.33%;}
    .Layout-B > * { width: 25%;}
    .Layout-C > :nth-child(2),
    .Layout-C > :nth-child(3) { 
        width: 75%;
        display: inline-block;
    }
}