JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<div class="subSection">  
   <div class="row subSectOne"></div>
   <div class="row subSectTwo"></div>
   <div class="row subSectThree"></div>
</div>

CSS

body{
    margin: 0;
}
.subSection{
    width: 100%;
    height: 200px;
}

.subSectOne {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectTwo {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectThree {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;   
}

.row{
    height: 100%;
    float: left;
    width: calc(100%/3);
    background-size: contain;
}