JSFiddle - React, Tailwind, and code Playground

by Roberto Apasajja

HTML

<div class="icon-bx-wraper style-3 left m-r100 m-b30 wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.4s" style="visibility: visible; animation-duration: 2s; animation-delay: 0.4s; animation-name: fadeInUp;">
							<div class="icon-bx-sm radius"> 
								<a href="javascript:void(0);" class="icon-cell">
									<i class="flaticon-idea"></i>
								</a> 
							</div>
							<div class="wraper-effect"></div>
							<div class="icon-content">
								<h4 class="dlab-title m-b15">Idea &amp; Analysis Gathering</h4>
								<p>Maecenas laoreet efficitur sagittis. Aliquam eleifend nisl leo, sit amet consequat augue mattis varius. Suspendisse rhoncus nisl.</p>
							</div>
						</div>

CSS

/*! CSS Used from: https://samar.dexignzone.com/xhtml/vendor/animate/animate.css */
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;}
/*! CSS Used from: https://samar.dexignzone.com/xhtml/css/style.css */
/*! @import https://samar.dexignzone.com/xhtml/icons/flaticon/flaticon.css */
[class^="flaticon-"]:before,[class^="flaticon-"]:after{font-family:Flaticon;font-style:normal;}
.flaticon-idea:before{content:"\f106";}
/*! end @import */
*,*::before,*::after{box-sizing:border-box;}
h4{margin-top:0;margin-bottom:0.5rem;}
p{margin-top:0;margin-bottom:1rem;}
a{color:#896eff;text-decoration:none;background-color:transparent;}
a:hover{color:#4b22ff;text-decoration:underline;}
h4{margin-bottom:0.5rem;font-weight:700;line-height:1.2;color:#000;}
h4{font-size:1.5625rem;}
@media print{
*,*::before,*::after{text-shadow:none!important;box-shadow:none!important;}
a:not(.btn){text-decoration:underline;}
p{orphans:3;widows:3;}
}
*{outline:none;padding:0;}
*::after{margin:0;padding:0;}
*::before{margin:0;padding:0;}
h4{font-family:"Source Sans Pro", sans-serif;font-weight:700;color:#1f2471;}
a{text-decoration:none;outline:none;color:#896eff;}
a:hover,a:focus{text-decoration:none;outline:none;}
::selection{color:#fff;background:#896eff;}
.m-b15{margin-bottom:15px;}
.m-b30{margin-bottom:30px;}
.m-r100{margin-right:100px;}
.icon-bx-sm{display:inline-block;text-align:center;border-radius:3px;width:80px;height:80px;line-height:80px;}
.icon-bx-sm.radius{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
.icon-bx-sm i{font-size:30px;vertical-align:middle;}
.icon-bx-wraper{position:relative;}
.icon-bx-wraper p:last-child{margin:0;}
.icon-bx-wraper.left .icon-bx-sm{float:left;margin-right:20px;}
.icon-content{overflow:hidden;}
.icon-bx-wraper.style-3{box-shadow:0 0px 10px 4px rgba(31, 66, 135, 0.1);padding:30px;background-color:#fff;border-radius:10px;transition:all 0.5s;overflow:hidden;z-index:9;}
.icon-bx-wraper.style-3 >...