JSFiddle - React, Tailwind, and code Playground
HTML
<div id="bovensterij" class="clearfix">
<div id="engagement">
<img src="img/engagement.jpg" alt="engagament" />
<h2>Engagement</h2>
<p>Content automatisch doorplaatsen</br>
naar uw Youtube, Facebook of </br>
twitter kanaal</p>
</div>
<div id="conversie">
<img src="img/conversie.jpg" alt="conversie" />
<h2>Conversie</h2>
<p>Van kijkers naar lid, klant koper of</br>
actieve deelnemer. Juist niet alleen</br>
voor grote organisaties</p>
</div>
<div id="elearning">
<img src="img/elearning.jpg" alt="elearning"/>
<h2>E-learning</h2>
<p>Online Video is een van de snelst</br>
groeiende onderwijsmethode aan</br>
het worden</p>
</div>
<div id="klanttevreden">
<img src="img/klanttevreden.jpg" alt="klanttevredenheid" />
<h2>Klanttevredenheid & Call-reductie</h2>
<p>Doordat klanten online goed worden</br>
geholpen hoeven zij niet meer</br>
te bellen of e-mailen</p>
</div>
<div id="communicatie">
<img src="img/communicatie.jpg" at="communicatie" />
<h2>Corperate Communicatie</h2>
<p>Cras justo odio, daboitus ac facicilis in,</br>
egestas eget quam. Vestibulumporta </br>felis euismod semper</p>
</div>
<div id="advertentie">
<img src="img/advertentie.jpg" alt="advertentie" />
<h2>Advertientie Omzetverhoging</h2>
<p>Cras justo odio, daboitus ac facicilis in,</br>
egestas eget quam. Vestibulumporta </br>felis euismod semper</p>
</div>
</div>
CSS
/*bovenste rij-----------------*/
/*plaatjes*/
#bovensterij{
width: 80%;
margin: 0 auto;
clear: both;
}
#bovensterij div{
width: 33.3333333%;
}
/*engagement*/
#engagement > h2, #conversie > h2, #elearning > h2, #klanttevreden > h2, #communicatie > h2, #advertentie > h2{
color: #8aafde;
font-size: 18px;
}
#engagement{
width: 33.333333%;
float: left;
}
#conversie{
width:33.3333333%;
float: left;
}
#elearning{
width: 33.333333%;
float: left;
}
/*onderste rij-----------------*/
#klanttevreden{
float: left;
width: 33.3333333%;
}
#communicatie{
float: left;
width: 33.3333333%;
}
#advertentie{
float: left;
width:33.3333333%
}