JSFiddle - React, Tailwind, and code Playground

by shahidkhan864

HTML

<div style="-moz-user-select: none;" id="carousel">
<div id="image">
<a target="_self" href="">
<img style="display: inline;" alt="title image " class="carousel-image" src="1.jpg" width="584" height="288"></a>
<a target="_self" href="">
<img style="display: none;" alt="title image " class="carousel-image" src="2.jpg" width="584" height="288"></a>
<a target="_self" href="">
<img style="display: none;" alt="title image " class="carousel-image" src="3.jpg" width="584" height="288"></a>
<a target="_self" href=""><img style="display: none;" alt="title image " class="carousel-image" src="4.jpg" width="584" height="288"></a>
</div>
<div style="opacity: 0.9;" id="banner">
</div>
<div id="info">
<h2 style="display: block;" class="headline">
<a target="_self" href="">Heading One</a></h2>
<p style="display: block;" class="teaser">
 description will come here. description will come here . description will come here .
</p>
<h2 style="display: none;" class="headline"><a target="_self" href="">Heading Two</a></h2>
<p style="display: none;" class="teaser">
description will come here. description will come here . description will come here . </a>
</p>
<h2 style="display: none;" class="headline">
<a target="_self" href="">Heading Three</a></h2>
<p style="display: none;" class="teaser">
description will come here. description will come here. description will come here .</a>
</p>
<h2 style="display: none;" class="headline"><a target="_self" href="">Heading Three</a></h2>
<p style="display: none;" class="teaser">
description will come here. description will come here. description will come here.</a>
    </p>
    <div id="nav">
        <ul class="button-holder">
            <li style="display: block;" class="button prev-position" id="prev"></li>
        </ul>
        <ul class="button-holder" id="buttons">
            <li style="display: inline;" class="button on" id="carouselSlide1">1</li>
            <li style="display: inline;" class="button off" id="carouselSlide2">2</li>
        ...

CSS

ul,li
{
    list-style: none;
}
#carousel,#carousel_no
{
    margin: 15px 0;
    moz-user-select: none;
    webkit-user-select: none;
}
#carousel .headline
{
    color: #06b;
    font: normal 26px / 1.3 Georgia,"Times New Roman",Times,serif;
}
#carousel .text3
{
    color: #333;
    font: normal 12px / 1.3 Arial,Helvetica,sans-serif;
}
#carousel .link
{
    color: #06b;
}
#carousel .alertdblarrow
{
    color: #d61;
    font: bold 15px Arial,Helvetica,sans-serif;
}
#carousel a
{
    text-decoration: none;
}
#carousel,#carousel_no
{
    background-color: white;
    border: 6px solid #ccc;
    display: block;
    height: 290px;
    position: relative;
    width: 586px;
}
#carousel #image,#carousel_no #image_static
{
    display: block;
    height: 288px;
    left: 1px;
    position: absolute;
    top: 1px;
    width: 584px;
}
#image .carousel-image
{
    border: none;
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
#carousel #banner
{
    background-color: white;
    bottom: 1px;
    height: 60px;
    left: 1px;
    position: absolute;
    width: 584px;
}
#carousel #info
{
    bottom: 1px;
    height: 90px;
    left: 1px;
    position: absolute;
    width: 584px;
}
#info .headline
{
    display: none;
    left: 14px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 6px;
}
#info .teaser
{
    top: 35px;
    display: none;
    left: 14px;
    margin: 0;
    padding: 0;
    position: absolute;
}
#carousel #info #nav
{
    bottom: 8px;
    position: absolute;
    right: 25px;
}
#nav .button-holder
{
    list-style: none outside none;
    margin: 0;
    padding: 0;
    
}
#nav .button
{
    cursor: pointer;
    display: inline;
}
#carousel .on
{
    background-color: #d61;
    border: 1px solid white;
    color: white;
    font: normal 12px / 1.5 Arial,Helvetica,sans-serif;
    letter-spacing: 0;
    padding: 1px 2px;
}
#carousel .off
{
    background-color: #cbcbcb;
    border: 1px solid white;
    color: #333;
    font: normal 12px...

JavaScript

var $j = jQuery;

$j(document).ready(function() {
    
    //
    // extend the core jQuery with disableSelection
    jQuery.fn.extend({
        disableSelection : function() {
            this.each(function() {
                this.onselectstart = function() {
                    return false;
                };
                this.unselectable = "on";
                jQuery(this).css('-moz-user-select', 'none');
            });
        }
    });
    //
    // disable selection of grade by grade
    $j('#carousel').disableSelection();

    // initialize state
    $j('#banner').animate({"opacity" : .9}, 0);
    $j('#info h2, #info p, #image img,#buttons li,#next,#prev').hide();
    var MINI = 1; // at least one slide must be set in the carousel
    var MAXI = 8; // no more than 8 slides can be set in the carousel
    var i = 1;
    var images = $j('#image img');
    var SETI = (images ? images.size() : 0);
    var fadeTime = 2000;
    var holdTime = 4000;
    var swapTime = 2000;
    var holdID = null;
    var swapID = null;
    if (SETI > MAXI) {
        SETI = MAXI;
    }
    if (SETI < MINI) {
        SETI = MINI;
    }

    // Run animation

    // Initially, image 1 fadeIn over 2 secs
    // image 1 holds for 4 secs
    var fadeInSlide = function() {
        $j('#image img:eq(' + (i - 1) + ')').fadeIn(fadeTime);
        holdID = setTimeout(fadeOutSlide, holdTime);
    }
    // image 1 fadeOut over 2 secs
    // blank holds for 2 secs
    var fadeOutSlide = function() {
        clearTimeout(holdID);
        $j('#image img:eq(' + (i - 1) + ')').fadeOut(fadeTime);
        swapID = setTimeout(nextSlide, swapTime);
    }
    // text 1 hides
    // nav goes to 2
    // text 2 shows
    var nextSlide = function() {
        clearTimeout(swapID);
        if (i >= SETI) {
            i = MINI;
        } else {
            i++;
        }
        setText(i);
        setButtonState(i);
        fadeInSlide();
    }
    // image 2 fadeIn over 2 secs

    // Stop...