JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<body class="icons">
  <div class="icon-images">
    <i class="fa fa-free-code-camp" aria-     hidden="true"></i>
   </div>
</body>

CSS

.icons{
  background-color:#DF3713;
  height:100%;
  weight:100%;
}

.icon-images{
  background-color:#198493;
  margin-top:5%;
  margin-left:25%;
  margin-right:25%;
  //border-radius:;
  height:100px;
  width:100px;
  -webkit-transform: rotate(0deg);
}

.icon-images:hover{
  background-color:yellow;
  transform:rotate(180deg);
}

JavaScript

$(document).ready(function(){
		$(".icon-images").css({
    		transition : 'background-color 0.5s ease-in-out,-webkit-transform 0.5s ease-in-out'
		});
});