JSFiddle - React, Tailwind, and code Playground

by Swordie

HTML

<center><h4>
Seven Knights, Test your Luck in Summons (c) Aykz(Mike Ante) 2016
</h4>
<h6>
  Instructions: Click the button to summon heroes! :)
</h6>
</center>
  <div><a  ></a></div>  
<div></div>
<div></div>

CSS

/*
 * Copyright (c) 2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * https://www.opensource.org/licenses/mit-license.php
 *
 * View the Sass/SCSS source at:
 * http://www.cssflow.com/snippets/glossy-buttons/demo/scss
 *
 * Original PSD by Alex Montague: https://goo.gl/tsyNM
 */

@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);

html, body { min-height: 100%; }

body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #92c7d6;
  background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: -o-radial-gradient(top, circle cover, #97d0e1, #427388 80%);
  background-image: radial-gradient(top, circle cover, #97d0e1, #427388 80%);
}

.container {
  width: 550px;
  margin: 80px auto;
  text-align: center;
}

.container > .button { margin: 0 10px; }

.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  min-width: 96px;
  line-height: 46px;
  padding: 0 24px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px #154c86;
  background-color: #247edd;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #1c65b2 #18589c #18589c;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%,...

JavaScript

/*
15/05/2016
- fixed some hero sorting issues
14/05/2016 
- animation added
- changed popover to modal
- colored legendaries
- shiny legendaries  
- added a bunch of monsters    
06/12/2016
- Added 4 Lords of the Old
- Adjusted Drop Rates        
*/
var...