JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div class="container">
<i class="fa fa-html5"></i>
</div>

CSS

.container{
    width: 100px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #ddd;
}
    .container i.fa{
        position: relative;
        left: 0px;
        display: inline-block;
    
        transition:         all 400ms ease-in-out;
    -moz-transition:    all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition:      all 400ms ease-in-out;
    -ms-transition:     all 400ms ease-in-out;
    }
    .container:hover i.fa{
        left: 40px;
    }