JSFiddle - React, Tailwind, and code Playground

by kuroir

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>Salem</title> 
    <!--Stylesheets--> 
    <link rel="stylesheet" href="http://technoheads.org/css/animated.css"/>  
    <link href="http://technoheads.org/css/style.css" rel="stylesheet" type="text/css" /> 
 
    <!--Scripts--> 
    <script type="application/javascript" src="http://technoheads.org/test/ice/js/jquery.js"></script> 
    <script src="http://technoheads.org/test/ice/js/jquery.easing.js" type="text/javascript"></script> 
    <script src="http://technoheads.org/test/ice/js/animated-menu.js" type="text/javascript"></script> 
    <script type="application/javascript" src="http://technoheads.org/test/ice/js/trans.js"></script> 
 
 
</head> 
<body> 
 
<div id="wrapper" class="center"> 
 
<!--Content Bars--> 
<!--div class="bar" id="left">id=#left, class=.bar</div>
<div class="bar" id="middle">id=#middle, class=.bar</div>
<div class="bar" id="right">id=#right, class=.bar</div--> 
<!--/Content Bars--> 
 
 
 
<!--Menu HTML--> 
<div id="menu"> 
    <ul>  
        <li class="white"> 
               <p><a href="#"><strong>Home</strong></a></p>  
               <p class="subtext">The front page</p>  
           </li> 
        <li class="white">  
               <p><a href="#"><strong>About</strong></a></p>  
               <p class="subtext"><strong>More info</strong></p>  
           </li> 
        <li class="white">  
            <p><a href="#"><strong>Contact</strong></a></p>  
               <p class="subtext">Get in touch</p>  
        </li> 
        <li class="white"> 
            <p><a href="#"><strong>Submit</strong></a></p>  
            <p class="subtext">Send us your stuff!</p>  
        </li> 
        <li class="white">  
            <p><a href="#"><strong>Terms</strong></a></p>  
            <p...

JavaScript

// JavaScript Document
var currentPosition = 0;
$(document).ready(function(){
  var slideWidth = 836;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var animLength = 600;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  checkForEnds(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Check to see if new position is unbounded, and wrap accordingly.
    checkForEnds(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    }, animLength, 'easeOutExpo');
    animLength=600;
  });

  /*// manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }    */
  
    // checkForEnds: Sets the beginning and end slides to wrap to the other end of the slideshow.
  function checkForEnds(position){
    // If left...