JSFiddle - React, Tailwind, and code Playground
HTML
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
<span class="outer">
<div class="outer">
<div class="inner">
</div>
</div>
</span>
CSS
body {
background: black;
}
span.outer{
position:relative;
width: 100px;
height: 100px;
display: block;
cursor: pointer;
float: left;
margin: 15px
}
div.outer {
overflow:hidden;
-moz-border-radius: 52px;
border-radius: 52px;
-webkit-border-radius: 56px;
border: white 5px solid;
}
.inner {
background:red;
height:100px;
width:300px;
position: relative;
background: #e6f0a3;
background: -moz-linear-gradient(-45deg, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043));
background: -webkit-linear-gradient(-45deg, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: -o-linear-gradient(-45deg, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: -ms-linear-gradient(-45deg, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: linear-gradient(135deg, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=1 );
}
JavaScript
$("span.outer").hover(function() {
$(this).find('.inner').animate({
left: '-200px'
}, 100, function() {
// Animation complete.
});
}, function() {
$(this).find('.inner').animate({
left: '0'
}, 100, function() {
// Animation complete.
});
});