JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container-fluid first-block col-md-12 col-lg-12 col-sm-12 col-xs-12" id="team">
<br><br>
<div class="row" style="text-align: center;">
<h2>Meet our team</h2>
<h4>Lorem ipsum solo dis amet</h4>
<br>
</div>
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;">
<img src="one.jpg" alt="" class="img-circle">
<br><br>
<h3>AWESOME DESIGN</h3>
<h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;">
<img src="four.jpg" alt="" class="img-circle">
<br><br>
<h3>EXCELLENT SUPPORT</h3>
<h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4>
</div>
<div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;">
<img src="two.jpg" alt="" class="img-circle">
<br><br>
<h3>FULLY RESPONSIVE</h3>
<h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4>
</div>
<br><br><br>
<div class="container col-md-12 col-sm-12 col-xs-12" style="text-align: center; padding: 20px;">
<a href="#team" class="btnlink">Meet the team</a>
</div>
</div>
</div>
<!--BLUE BLOCK-->
<div class="container-fluid blueblock col-md-12 col-sm-12 col-xs-12">
</div>
CSS
.blueblock {
position: static;
background-color: blue;
min-height: 100%;
height: 100%;
}
.first-block {
text-align: center;
min-height: 100%;
height: 100%;
}
.first-block img {
padding: 20px;
max-width: 60%;
height: auto;
text-align: center;