JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<link rel="stylesheet" href="http://i.icomoon.io/public/temp/82eade4595/UntitledProject1/style.css">
  <header>
  <img class="logo" src="http://i.imgur.com/Y65sFMa.png"/>
    <button class="join">PLAY NOW US.MINEPLEX.COM<span class="arrow-right-3">t</span></button>
    
</header>
<menu>
  <ul id="menu">
    <li>HOME</li>
    <li>SHOP</li>
    <li>FORUMS</li>
    <li>MEMBERS</li>
  </ul>
</menu>
  <div id="ticker">NEWS:     <orange>NEW GAME - DRAW MY THING!</orange></div>
    <div id="ticker" class="left">PLAYERS ONLINE:     <orange>6543</orange></div>

  
<slider>

  <ul id="items">
    <li> 
      <img class="player" src="http://assets.enjin.com/wall_embed_images/1387371113_cft3n1o.png"/>
            <button class="top">MORE INFO</button>

    </li>
    <li> 
      <img class="player" src="http://assets.enjin.com/wall_embed_images/1387371113_cft3n1o.png"/>
            <button class="top">MORE INFO</button>

    </li>
   <li> 
      <img class="player" src="http://assets.enjin.com/wall_embed_images/1387371113_cft3n1o.png"/>
            <button class="top">MORE INFO</button>

    </li>
    <li> 
      <img class="player" src="http://assets.enjin.com/wall_embed_images/1387371113_cft3n1o.png"/>
            <button class="top">MORE INFO</button>

    </li>

  </ul>
    <ul id="left">
        <li class="item">
      <span id="big">ARCADE</span>
    </li>



    <li class="item">
      <span id="big">CLASSICS</span>
    </li>
    <li class="item">
      <span id="big">SURVIVAL</span>
    </li>
    <li class="item">
      <span id="big">CHAMPIONS</span>
    </li>

    
  </ul>

CSS

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
*{box-sizing: border-box;padding: 0; marging: 0}

:root, body{
    width:100vw
}

header {
  background: #2d2d2d;
  width: 100%;
  height: 112px;
}


.logo {
  margin-top: 20px;
  margin-left: 150px;
  width: 262px;
}
.item {
  list-style: none;
  background: #2D2D2D;
  font-family: oswald;
  margin-bottom: 20px;
  color: #ffffff;
  width: 200px !Important;
  position: relative;
    z-index: 1;

  font-size: 20px;
  padding: 10px;
}
#items img {
  list-style: none;
    z-index: 999999999999999999999999999999999999999;
  position: relative;

  width: 650px !important;
}
#items {
  margin-left: 125px;
  float: left;
}
.top {
  position: absolute;
    background: #f3953c;
  border: none !important;
  color: #ffffff;
  border-radius: 5px;
  font-family: oswald;
  font-weight: 500;
  height: 45px;
  cursor: pointer;
  padding: 5px;
  font-size: 20px;
  margin-left: -630px;
  margin-top: 25px;
}
#items li {
  list-style: none;
}
.player {
  float: left;
  
}
#left {
  float: left;
  margin-left: -30px;
  z-index: 0;
}
.active {
  background-color: #f3953c !Important;
  margin-left: -10px;
  padding-left: 20px;
}
.join {
  background: #f3953c;
  border: none !important;
  color: #ffffff;
  border-radius: 5px;
  font-family: oswald;
  font-weight: 500;
  position: absolute;
  right: 150px;
  top: 25px;
  height: 45px;
  cursor: pointer;
  padding: 5px;
  font-size: 20px;
}
menu {
  background: #373737;
  height: 60px;
  width: 100%;
  border-bottom: 5px solid...

JavaScript

$(document).ready(function(){
  $(".item").first().addClass("active");
    $("#items li").first().show();
  $(".player").hide();
   $(".player").first().show();

});
  $(".item").click(function(){
      $(".item").removeClass("active");
  $(this).addClass("active");
var index = $(this).index();
    var numb = $("#items li").get(index);
    $("#items li").fadeOut(10);
$(numb).fadeIn();
  });

setInterval(function() {
  var itemz = $(".active").index();
    if(itemz == 3){
    var itemz = -1;
  }
  var bar = $(".item").get(itemz + 1);
  $(".item").removeClass("active");
  $(bar).addClass("active");
  var get = $("#items li").get(itemz + 1);
  $("#items li").hide();
  $(get).fadeIn();

      }, 7000);