JSFiddle - React, Tailwind, and code Playground

by Matteo Schiatti

HTML

<div class="contenitor-projects">
  <div class="row1-projects">
    <div id="proj1"></div>
    <div id="proj2"></div>
    <div id="proj3"></div>
    <div id="proj4"></div>
    <div id="proj1"></div>
    <div id="proj2"></div>
    <div id="proj3"></div>
    <div id="proj4"></div>
  </div>
</div>

CSS

body, html {
margin:0px;
padding: 0;
}
.contenitor-projects {

  height:100vh;
}
.row1-projects {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

#proj1 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj2 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%; /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj3 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */
height:calc(100vh / 3);
margin:3px; /* add this */
}

#proj4 {
background: url("http://lorempixel.com/400/200") center center no-repeat;
background-size:cover;
flex:1 0 25%;  /* add this */ 
height:calc(100vh / 3); 
margin:3px; /* add this */
}