JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<main>
    <div class="static">
        <h1 class="js-heading">League</h1>
        <p class="js-subheading">Weeks Best 11</p>
        <div class="js-switcher switcher">
            <a href="#" class="js-switch disabled switch-btn">HOME</a><a href="#" class="js-switch switch-btn">AWAY</a>
        </div>
    </div>
    <div class="js-stage stage texture">
        <div class="js-world world">
            <div class="team js-team">
                <!-- Team cards / icons goes here -->
            </div>
            <div class="terrain js-terrain">
                <div class="field field--alt"></div>
                <div class="field ground">
                    <div class="field__texture field__texture--gradient"></div>
                    <div class="field__texture field__texture--gradient-b"></div>
                    <div class="field__texture field__texture--grass"></div>
                    <div class="field__line field__line--goal"></div>
                    <div class="field__line field__line--goal field__line--goal--far"></div>
                    <div class="field__line field__line--outline"></div>
                    <div class="field__line field__line--penalty"></div>
                    <div class="field__line field__line--penalty-arc"></div>
                    <div class="field__line field__line--penalty-arc field__line--penalty-arc--far"></div>
                    <div class="field__line field__line--mid"></div>
                    <div class="field__line field__line--circle"></div>
                    <div class="field__line field__line--penalty field__line--penalty--far"></div>
                </div>
                <div class="field__side field__side--front"></div>
                <div class="field__side field__side--left"></div>
                <div class="field__side...

CSS

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  padding: 0;
  margin: 0;
}
.velocity-animating {
  -webkit-transition: none !important;
  transition: none !important;
}
body {
  background-image: -webkit-radial-gradient(ellipse, #2a437c 0, #10203b 100%);
  font-family: 'Open Sans', helvetica, arial, sans-serif;
}
main {
  opacity: 0;
}
.static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 0;
  z-index: 3;
}
.static h1 {
  margin: 50px 0 15px;
  font-size: 50px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 42px;
  letter-spacing: -3px;
  font-family: montserrat;
}
.static p {
  font-weight: 300;
  opacity: 0.4;
  margin: 0 0 20px;
  font-size: 16px;
  color: #7f98d3;
}
.loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 16px;
  line-height: 16px;
  color: #fff;
  font-family: 'montserrat';
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
  text-align: center;
  opacity: 0;
}
.team-list {
  position: absolute;
  left: 40px;
  top: 100px;
  list-style: none;
  display: none;
}
.team-list li:first-child {
  color: #fff;
  font-weight: bold;
}
.team-list li {
  font-size: 1.4rem;
  margin: 0 0 10px;
  color: #7f98d3;
}
.stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-perspective-origin: 50% -200px;
          perspective-origin: 50% -200px;
  -webkit-perspective: 1100px;
          perspective: 1100px;
  z-index: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.world {
  position: absolute;
  top: 130px;
  left: 50%;
  margin-left: -336px;
  width: 672px;
  height: 840px;
  -webkit-transform: translateZ(-210px);
          transform: translateZ(-210px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  z-index: 1;
  -webkit-backface-visibility: hidden;
         ...

JavaScript

var $closeBtn, $heading, $loadBtn, $loading, $players, $playersAway, $playersHome, $stage, $subHeading, $switchBtn, $switcher, $team, $teamListHome, $terrain, $world, ASSET_URL, anim, data, dom, events, init, pos, scenes, state;

ASSET_URL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/';

$stage = null;

$world = null;

$terrain = null;

$team = null;

$teamListHome = null;

$players = null;

$playersHome = null;

$playersAway = null;

$switchBtn = null;

$loadBtn = null;

$closeBtn = null;

$heading = null;

$subHeading = null;

$loading = null;

$switcher = null;

data = {
  players: {
    home: [
      {
        name: 'Pizarro',
        asset: 'bm-pizarro.jpg',
        origin: 'Peru',
        height: '1.84m',
        shirt: '14',
        pos: 'Forward',
        dob: '36',
        goals: 1,
        games: 16,
        x: 110,
        y: -190
      }, {
        name: 'Robben',
        asset: 'bm-robben.png',
        origin: 'Holland',
        height: '1.80m',
        shirt: '10',
        pos: 'Forward',
        dob: '32',
        goals: 19,
        games: 30,
        x: -110,
        y: -190
      }, {
        name: 'Rilbery',
        asset: 'bm-rilbery.jpg',
        origin: 'France',
        height: '1.70m',
        shirt: '7',
        pos: 'Midfield',
        dob: '32',
        goals: 9,
        games: 22,
        x: 150,
        y: 50
      }, {
        name: 'Schweinsteiger',
        asset: 'bm-schweinsteiger.jpg',
        origin: 'Germany',
        height: '1.87m',
        shirt: '24',
        pos: 'Forward',
        dob: '31',
        goals: 21,
        games: 3,
        x: 0,
        y: 100
      }, {
        name: 'Martinez',
        asset: 'bm-martinez.jpg',
        origin: 'Spain',
        height: '1.90m',
        shirt: '8',
        pos: 'Midfield',
        dob: '28',
        goals: 0,
        games: 2,
        x: -150,
        y: 50
      }, {
        name: 'Alaba',
        asset: 'bm-alaba.jpg',
        origin: 'Austria',
        height:...