JSFiddle - React, Tailwind, and code Playground

by fripouille

HTML

<div id="display">
    <div class="item_1">
        <p>blablabla</p>
        <img src='http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-chatons.jpg'/>
    </div>
    <div class="item_2">
        <p>blablabla</p>
    </div>
    <div class="item_3">
        <p>blablabla</p>
        <img src='http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg'/>
    </div>
    <div class="item_4">
        <p>blablabla</p>
    </div>
</div>    
    
    
    
<table>
  <tr>
     <th>Item 1</th>
     <th>Item 2</th>
     <th>Item 3</th>
     <th>Item 4</th>
  </tr>
  <tr>
     <td></td>
     <td>image 2</td>
     <td></td>
     <td>image 3</td>
  </tr>
</table>

CSS

#display {
    margin: 0 auto;
    width:100%;
    padding-bottom:5%;
}

.item_1, .item_2, .item_3, .item_4 {
    width: 22%;
    margin: 0 1%;
    display:inline-block;
    text-align:center;
}

img {
    width:100%;
    display:block;
}

.item_1 {
    background-color:red;
        
}  
.item_2 {
    background-color:orange;
        
}
.item_3 {
    background-color:green;
        
}
.item_4 {
    background-color:yellow;        
}



table {
    width:100%;
    text-align:center;  
}

th {
background-color:green;
color:white;
width:22%;
padding:0 1%;
}