JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="wrapper">
<ul id="flip">
    
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/1.png" />
    <div class="content">
        <p class="title">CHARON-AXP/DS10</p>
        <p>Up to two (2) virtual CPUs</p>
        <p>Up to 32GB of Alpha memory.</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $9,500.00 USD</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/2.png" />
    <div class="content">
        <p class="title">CHARON-AXP/GS80</p>
        <p>Up to eight (8) virtual CPUs</p>
        <p>Up to 32GB of Memory</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $49,000</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/5.png" />
    <div class="content">
        <p class="title">CHARON-AXP/DS20</p>
        <p>Up to two (2) virtual CPURun
s</p>
        <p>Up to 32GB of Alpha memory.</p>
        <p>Run OpenVMS or Tru64 with no changes</p>
        <p>Supports Windows, Linux and VMware</p>
        <p>Pricing starts at $12,200</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/4.png" />
    <div class="content">
        <p class="title">A title for the image</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/6.png" />
    <div class="content">
        <p class="title">CHARON-VAX/6620</p>
        <p>Up to six (6) virtual CPUs</p>
        <p>Up to 3 GB of Memory</p>
        <p>Run OpenVMS with no changes</p>
        <p>Supports Windows and VMware</p>
        <p>Pricing starts at 65,000</p>
    </div>
</li>
<li>
    <img src="http://mikedemar.com/stromasys/jcoverflip/images/7.png" />
    <div class="content">
        <p class="title">A title for the image</p>
    </div>
</li>
</ul>
<div id="scrollbar"></div>
</div>

CSS

</style>
<link rel="stylesheet" href="http://mikedemar.com/stromasys/jcoverflip/jquery-ui-1.7.2.custom.css" type="text/css" media="all" />
<style type="text/css">
.ui-jcoverflip {
position: relative;
}

.ui-jcoverflip--item {
position: absolute;
display: block;
}

/* Basic sample CSS */
#flip {
height: 145px;
width: 630px;
}

#flip .ui-jcoverflip--title {
position: absolute;
bottom: -90px;
width: 100%;
text-align: center;
color: #2D548E;
font-size:12px; 
}


#flip img {
display: block;
border: 0;
outline: none;
}

#flip a {
outline: none;
}


#wrapper {
    margin: 35px 0px 0px 35px;
    padding: 80px 0px 0px 0px;
    height: 346px;
    width: 606px;
    overflow: hidden;
    position: relative;
    background-image:url('images/sliderbg.jpg');
    background-repeat: no-repeat;
}

.ui-jcoverflip--item {
    cursor: pointer;
}
body {
    font-family: Arial, sans-serif;
    width: 606px;
    padding: 0;
    margin: 0;
}

ul,
ul li {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
}

#scrollbar {
    position: absolute;
    top: 310px;
    left: 20px;
    right: 20px;
}

.title {color:red;}

/* Added styles */

#flip>li>.content{display:none;}

#flip>li.selected>.content{
    display:block;
    position:absolute;
    font-size:11px;
    z-index:1;
    text-align:center;
    width:500px;
    padding-left:50%;
    margin-left:-250px;
}

#flip>li.selected>.content>.title{font-size:16px;display:block!important;}

#scrollbar{top:320px;}

JavaScript

</script>
<script type="text/javascript" src="http://mikedemar.com/stromasys/jcoverflip/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://mikedemar.com/stromasys/jcoverflip/jquery-ui-1.7.2.custom.js"></script>
<script type="text/javascript" src="http://mikedemar.com/stromasys/jcoverflip/jquery.jcoverflip.js"></script><script>
jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
      current: 2,
      beforeCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset -10*offset )+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      afterCss: function( el, container, offset ){
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset + 10*offset)+'px', bottom: '20px' }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-20*offset*offset) + 'px' }, {} )
        ];
      },
      currentCss: function( el, container ){
        jQuery('#flip>li.selected').removeClass('selected');
        el.addClass('selected');
        return [
          $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 75 )+'px', bottom: 0 }, { } ),
          $.jcoverflip.animationElement( el.find( 'img' ), { width: '150px' }, { } )
        ];
      },
      change: function(event, ui){
        jQuery('#scrollbar').slider('value', ui.to*25);
      }
    });
    
    
    jQuery('#scrollbar').slider({
      value: 50,
      stop: function(event, ui) {
        if(event.originalEvent) {
          var newVal = Math.round(ui.value/25);
          jQuery( '#flip' ).jcoverflip( 'current', newVal );
          jQuery('#scrollbar').slider('value', newVal*25);
        }
      }
    });
});

var timer=setInterval(next,3000);

function next(){
    var...