JSFiddle - React, Tailwind, and code Playground
HTML
<section id="index" class="clearfix">
<div class="column first">
<img src="http://www.part.lt/img/eafd9acad6d0ad3d4b15316b2d88f7e439.png" alt="" />
<h2>Organisation</h2>
<p>Our company is an organisation expert. We specialise in project organisation. Our goal is to get the best results, satify our clients and improve. </p>
</div>
<div class="column">
<img src="http://www.part.lt/img/58f1d2fb827e5ba1b39d2a05dc60ad2e697.png" alt=""/>
<h2>Management</h2>
<p>We can manage everything. Even a slightest detail. Our management has seven stages which aquires the best results possible even if it is not.</p>
</div>
<div class="column last">
<img src="http://www.part.lt/img/da9915be9199c465873d4b9dd895898c157.png" alt="" class="spin"/>
<h2>Repair</h2>
<p>Repair is our second name. We repair thing like no one else. Our company has a lot of positive feedback and satisfied clients. We have hope to have even more of them.</p>
</div>
</section>
CSS
#index{
width:100%;
margin-top: 38px;
}
.first{
float:left;
}
.last{
float:right;
}
.column{
display: inline-block;
width: 33%;
text-align: center;
vertical-align: top;
}
#index .column img{
margin-bottom: 15px;
}
#index .column p{
color:#a1a1a1;
font-size: 12px;
text-align: center;
margin: 9px;
padding-bottom: 35px;
}
.column:hover + .spin{
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}