JSFiddle - React, Tailwind, and code Playground
HTML
<div class="projects">
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
<div class="project mix">
<div class="overlay">
<div class="overlay-title">title</div>
<p class="overlay-content">text</p>
</div>
</div>
</div>
CSS
.projects {
font-size: 12pt;
text-align: justify;
max-width: 85%;
margin: auto;
border: 1px solid #ff0000;
}
.project {
position: relative;
margin-top: 20px;
width: 40%;
height: 200px;
display: inline-block;
background: #ff0000;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
text-align: center;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-ms-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.projects:before {
content:'';
display: block;
width: 100%;
}
.projects:after {
content:'';
display: inline-block;
width: 100%;
}