JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<head><script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://code.helperblogger.com/jquery.nivo.slider.js"
type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider();
    });
</script>
</head>
<div id="slider">
    <a href="YOUR LINK HERE"><img src="http://4.bp.blogspot.com/-XjT6cAIxFuU/T3qDOIHRVsI/AAAAAAAAAU4/NZkg_8hAnok/s640/aventador-3-4.jpg" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="http://alvarojm.files.wordpress.com/2012/03/1331036719_extras_albumes_0.jpg?w=640" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="http://www.autoword.it/wp-content/uploads/2012/01/lambo1-small.jpg" alt="" title="ADD DESCRIPTION HERE" /></a>
    <a href="YOUR LINK HERE"><img src="http://dnaimg.com/2011/07/07/how-a-lamborghini-aventador-is-born/07.jpg" alt="" title="ADD DESCRIPTION HERE" /></a>
</div>

CSS

#slider {
    position: relative;
    border: 5px solid #333;
}
 
#slider img {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
 
#slider a {
    border: 0;
    display: block;
}
 
.nivo-controlNav {
    position: absolute;
    left: 260px;
    bottom: -42px;
}
 
.nivo-controlNav a {
    display: block;
    width: 22px;
    height: 22px;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/s400/bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 3px;
    float: left;
}
 
.nivo-controlNav a.active {
    background-position: 0 -22px;
}
 
.nivo-directionNav a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/s400/arrows.png) no-repeat;
    text-indent: -9999px;
    border: 0;
}
 
a.nivo-nextNav {
    background-position: -30px 0;
    right: 15px;
}
 
a.nivo-prevNav {
    left: 15px;
}
 
.nivo-caption {
    text-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 0px;
}
 
.nivo-caption a {
    color: #efe9d1;
    text-decoration: underline;
}
 
.clear {
    clear: both;
}
 
.nivoSlider {
    position: relative;
}
 
.nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
}
 
.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 60;
    display: none;
}
 
.nivo-slice {
    display: block;
    position: absolute;
    z-index: 50;
    height: 100%;
}
 
.nivo-caption {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: #000;
    color: #fff;
    opacity: 0.7;
 /* Overridden by captionOpacity setting */
    width: 100%;
    z-index: 89;
}
 
.nivo-caption p {
    padding: 5px;
    margin: 0;
}
 
.nivo-caption a {
    display: inline !important;
}
 
.nivo-html-caption {
   ...