JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js"></script>
<script src="http://www.designexperienceproject.com/v3.0/scripts/font.CA_BND_Web_Bold_700.font.js"></script>
<div id="carousel_container">
  <div>
    <div class="hd">
      
    </div>
    <div class="bd">
      <div class="carousel">
        <ul>
          <li> 
            <div class="desc">
              <h4 class="gothamMedium"> This is a test Text</h4>
              <p> dafhsdh sdhfgh dfghdfgh</p>
              <a class="" href="xm">Learn More</a></div>
            <div class="clear"> </div>
          </li>
          <li> 
            <div class="desc">
              <h4 class="gothamMedium"> ANother example</h4>
              <p> asdfgdfgsdf dfsgsdfgs sdfgsdfgsdfg.</p>
              <a class="" href="picture-video">Read More</a></div>
            <div class="clear"> </div>
          </li>
         
          <li> 
            <div class="desc">
              <h4 class="gothamMedium"> The last one</h4>
              <p> zsdfgsdfg sdfgsdfg .</p>
              <a class="" href="usbconnectivity">Learn More</a></div>
            <div class="clear"> </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

CSS

*/
/* ---------------------------- 1. Reset ---------------------------- */

/* Copyright (c) 2010,Yahoo! Inc. All rights reserved. Code licensed under the BSD License:http://developer.yahoo.com/yui/license.html version:3.3.0 build:3167*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
li {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border:0;
    font-variant:normal;
}
sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input,textarea,select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}
legend {
    color: #000;
}
/* ------------------------ 2. General elements --------------------- */
body {
    background:#EDEDED;
    font:10px Arial,Helvetica,sans-serif;
}
}
h2 {
font-size:22px;
}
a {
color:#000;
}
a:focus {
border:none !important;
}
p {
font:12px Arial,Helvetica,sans-serif;
}
legend {
font-size:11px;
font-weight:bold;
}
fieldset {
margin-bottom:5px;
}
input[type=text] {
color:#959595;
}

.linkArrow {
padding-right:20px;
padding-bottom:1px;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
}
.nextArrow {
color:#656565;
font-size:12px;
margin-top:18px;
text-decoration:none;
text-align:right;
width:140px;
clear:right;
}
.nextArrow img {
margin-top:1px;
vertical-align:middle;
}
.hide {
display:none !important;
}
.display {
display:block;
}

#carousel_container
{ font-family:Arial; }

#carousel_container .bd .carousel
{ background: #ABC;
  margin:15px 0 15px;
  width:938px; }

#carousel_container .bd .carousel ul li
{ float:left;
  display:block;
  width:290px;...

JavaScript

/*!
 * jCarousel - Riding carousels with jQuery
 *   http://sorgalla.com/jcarousel/
 *
 * Copyright (c) 2006 Jan Sorgalla (http://sorgalla.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Built on top of the jQuery library
 *   http://jquery.com
 *
 * Inspired by the "Carousel Component" by Bill Scott
 *   http://billwscott.com/carousel/
 */

(function(i){var q={vertical:false,rtl:false,start:1,offset:1,size:null,scroll:3,visible:null,animation:"normal",easing:"swing",auto:0,wrap:null,initCallback:null,reloadCallback:null,itemLoadCallback:null,itemFirstInCallback:null,itemFirstOutCallback:null,itemLastInCallback:null,itemLastOutCallback:null,itemVisibleInCallback:null,itemVisibleOutCallback:null,buttonNextHTML:"<div></div>",buttonPrevHTML:"<div></div>",buttonNextEvent:"click",buttonPrevEvent:"click",buttonNextCallback:null,buttonPrevCallback:null, itemFallbackDimension:null},r=false;i(window).bind("load.jcarousel",function(){r=true});i.jcarousel=function(a,c){this.options=i.extend({},q,c||{});this.autoStopped=this.locked=false;this.buttonPrevState=this.buttonNextState=this.buttonPrev=this.buttonNext=this.list=this.clip=this.container=null;if(!c||c.rtl===undefined)this.options.rtl=(i(a).attr("dir")||i("html").attr("dir")||"").toLowerCase()=="rtl";this.wh=!this.options.vertical?"width":"height";this.lt=!this.options.vertical?this.options.rtl? "right":"left":"top";for(var b="",d=a.className.split(" "),f=0;f<d.length;f++)if(d[f].indexOf("jcarousel-skin")!=-1){i(a).removeClass(d[f]);b=d[f];break}if(a.nodeName.toUpperCase()=="UL"||a.nodeName.toUpperCase()=="OL"){this.list=i(a);this.container=this.list.parent();if(this.container.hasClass("jcarousel-clip")){if(!this.container.parent().hasClass("jcarousel-container"))this.container=this.container.wrap("<div></div>");this.container=this.container.parent()}else...