JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="wrap">
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
    
    <div class="image img4"></div>
    <div class="image img5"></div>
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
 
    <div class="image img1"></div>
    <div class="image img2"></div>
    <div class="image img3"></div>
    <div class="image img4"></div>
    <div class="image img5"></div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:500%;
    height:500%;
}
.image {
    width:20%;
    height:20%;
    float:left;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.img1{
    background-image: url(http://lorempixel.com/output/city-q-g-1724-977-9.jpg);
}
.img2{
    background-image: url(http://lorempixel.com/output/nature-q-c-1724-977-1.jpg);
}
.img3{
    background-image: url(http://lorempixel.com/output/fashion-q-g-1724-977-5.jpg);
}
.img4{
    background-image: url(http://lorempixel.com/output/city-q-c-1724-977-8.jpg);
}
.img5{
    background-image: url(http://lorempixel.com/output/sports-q-g-1724-977-9.jpg);
}