JSFiddle - React, Tailwind, and code Playground

by Sam Westwood

HTML

<!DOCTYPE html>

<html>


  <body>

    <div class="imageHolder">

      <div class="imagePlacement">

        <img class="center" src="img/fact.png"/>

      </div>


      <footer>
        <div id="loading-bar">

	  <div id='bottom_bar_logo'></div>

	  <div id='instructions' class="copy"></div>
        </div>

        <div id="ready-button" onclick="startLobby();" style="display:none;">
          <div class="btn">Start game</div>
        </div>
      </footer>
    </div>
    <script src="../common/bottom_bar.js"></script>

  </body>
</html>

CSS

body{
margin: 0px;
}

h1{
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 4px;
    margin-top: 0px;
}

a{
  color:#FFF500;
}

footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.imageHolder {
width:960px;
height:600px;
background-color: #fff;
}

#ready-button{
  height: 120px;
}

#loading-bar{
  height: 120px;
  background-color: #0F6AC8;
}

#bottom_bar_logo{
  height: 100%;
}

.logo{
  height: 80px;
  margin-left: 50px;
  margin-top: 25px;
  padding-bottom: 5px;
}

.center{
margin-left: auto;
margin-right: auto;
display: block;
padding-top: 70px;
margin-bottom: 80px;
}


.copy {
	color:#ffffff;
  margin-left: 404px;
  margin-top: -80px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 15px;
}

.btn {
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 0px #c7c7c7;
  -moz-box-shadow: 2px 2px 0px #c7c7c7;
  box-shadow: 2px 2px 0px #c7c7c7;
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  font-size: 28px;
  background: #48A8CA;

  padding: 16px 40px 16px 40px;
  text-decoration: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 150px;
  margin-top: 20px;

  cursor: pointer;

}


.btn:hover {
  background: #2B809E;
  text-decoration: none;
}

/* panda */
.panda-leg{
  margin-left: -105px;
  padding-bottom: 2px;
  padding-top: 7px;
}

.panda-animation{
  padding-top: 10px;
  margin-left: -10px;
  animation: pandaAnimationFrames ease-in 1s;
  animation-iteration-count: infinite;
  transform-origin: 0% 100%;
  -webkit-animation: pandaAnimationFrames ease-in 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0% 100%;
  -moz-animation: pandaAnimationFrames ease-in 1s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0% 100%;
  -o-animation: pandaAnimationFrames ease-in 1s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 0% 100%;
 ...