JSFiddle - React, Tailwind, and code Playground
by ASHISH ROX
HTML
<link rel="stylesheet" href="http://html.dankov-theme.com/sudzuki/assets/css/simple-line-icons.css">
<div class="serv-bg service" id="2">
<div class="container" id="service-scroll">
<div class="row marg75">
<div class="col-lg-12">
<div class="promo">Services</div>
<div class="promo-p">You will get the best quality services</div>
</div>
</div>
<div class="row marg50">
<div class="col-lg-12">
<div class="serv-3 serv-6 serv-12">
<div class="serv-block sb1">
<div class="serv-icon s1"><i class="icon-rocket"></i></div>
<div class="serv-name">Easy to launch</div>
<div class="serv-desc"> Fully responsive layout</div>
</div>
</div>
<div class="serv-3 serv-6 serv-12">
<div class="serv-block sb2">
<div class="serv-icon s2"><i class="icon-speedometer"></i></div>
<div class="serv-name">SEO optimized</div>
<div class="serv-desc">Seo Optimized </div>
</div>
</div>
<div class="serv-3 serv-6 serv-12">
<div class="serv-block sb3">
<div class="serv-icon s3"><i class="icon-diamond"></i></div>
<div class="serv-name">Unique design</div>
<div class="serv-desc">Our Templates Have unique Designs</div>
</div>
</div>
<div class="serv-3 serv-6 serv-12">
<div class="serv-block sb4">
<div class="serv-icon s4"><i class="icon-screen-tablet"></i></div>
<div class="serv-name">Fully responsive</div>
<div class="serv-desc">Our Templates Are Fully Responsive</div>
</div>
</div>
</div>
</div>
</div>
</div>CSS
*/
/** YELLOW SECTION START **/
.icon-user-female:before {
content: "\e000";
}
.icon-user-follow:before {
content: "\e002";
}
.icon-user-following:before {
content: "\e003";
}
.icon-user-unfollow:before {
content: "\e004";
}
.icon-trophy:before {
content: "\e006";
}
.icon-screen-smartphone:before {
content: "\e010";
}
.icon-screen-desktop:before {
content: "\e011";
}
.icon-plane:before {
content: "\e012";
}
.icon-notebook:before {
content: "\e013";
}
.icon-moustache:before {
content: "\e014";
}
.icon-mouse:before {
content: "\e015";
}
.icon-magnet:before {
content: "\e016";
}
.icon-energy:before {
content: "\e020";
}
.icon-emoticon-smile:before {
content: "\e021";
}
.icon-disc:before {
content: "\e022";
}
.icon-cursor-move:before {
content: "\e023";
}
.icon-crop:before {
content: "\e024";
}
.icon-credit-card:before {
content: "\e025";
}
.icon-chemistry:before {
content: "\e026";
}
.icon-user:before {
content: "\e005";
}
.icon-speedometer:before {
content: "\f180";
}
.icon-social-youtube:before {
content: "\e008";
}
.icon-social-twitter:before {
content: "\e009";
}
.icon-social-tumblr:before {
content: "\e00a";
}
.icon-social-facebook:before {
content: "\e00b";
}
.icon-social-dropbox:before {
content: "\e00c";
}
.icon-social-dribbble:before {
content: "\e00d";
}
.icon-shield:before {
content: "\e00e";
}
.icon-screen-tablet:before {
content: "\f109";
}
.icon-magic-wand:before {
content: "\e017";
}
.icon-hourglass:before {
content: "\e018";
}
.icon-graduation:before {
content: "\e019";
}
.icon-ghost:before {
content: "\e01a";
}
.icon-game-controller:before {
content: "\e01b";
}
.icon-fire:before {
content: "\e01c";
}
.icon-eyeglasses:before {
content: "\e01d";
}
.icon-envelope-open:before {
content: "\e01e";
}
.icon-envelope-letter:before {
content: "\e01f";
}
.icon-bell:before {
content: "\e027";
}
.icon-badge:before {
content: "\e028";
}
.icon-anchor:before {
content: "\e029";
}
.icon-wallet:before {
content: "\e02a";
}
.icon-vector:before {
content:...