JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/carasol.js"></script>
<script type="text/javascript" src="js/lb.js"></script>
</head>

<body>

    <a id="show-panel" href="#one">Content 1</a> 
    <a id="show-panel" href="#two">Content 2</a>  
    <a id="show-panel" href="#three">Content 3</a>  

    
    <div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <a id="close-panel" href="#">Close this window</a>  
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>
 
    <div id="slides">
        <ul>
            <li><div class="slide one">Content 1</div></li>
            <li><div class="slide two">Content 2</div></li>
            <li><div class="slide three">Content 3</div></li>
        </ul>
        <div class="clear"></div>
    </div>
 </div>
      
    <div id="lightbox"> </div>

</body>
</html>

CSS

@charset "utf-8";
 
#slides {overflow:hidden; position:relative; width:250px; height:250px;}
 
#slides ul {position:relative; left:0; top:0; list-style:none; margin:0; padding:0; width:750px;}
 
#slides li {width:250px;height:250px;float:left;}
 
.clear {clear:both}

.slide {height:250px}

.one {background:#069}

.two {background:#69C}

.three {background:#099}









    #lightbox {  
     display:none;  
     background:#000000;  
     opacity:0.9;  
     filter:alpha(opacity=90);  
     position:absolute;  
     top:0px;  
     left:0px;  
     min-width:100%;  
     min-height:100%;  
     z-index:1000;  
    } 

    
    
    
#carousel {width:255px; height:290px; margin:0 auto; background:#0F0;  display:none; z-index:10001; position:fixed; left:50%;top:100px; margin-left:-112px;}

JavaScript

$(document).ready(function() {
    
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth(); 
    var left_value = item_width * (-1); 
        
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
    
    //set the default item to the correct position 
    $('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
    $('#prev').click(function() {

        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item            
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item                
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        
        });

        //cancel the link behavior            
        return false;
            
    });

 
    //if user clicked on next button
    $('#next').click(function() {
        
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
        
        //slide the item
        $('#slides ul:not(:animated)').animate({'left' : left_indent}, 200, function () {
            
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                     
            
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
        
        });
                 
        //cancel the link behavior
        return false;
        
    });        
      
});

$(document).ready(function(){
        $("a#show-panel").click(function(){
        $("#lightbox, #carousel").fadeIn(1);  
    })  
       ...