JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<div id="mine" class="construction card bigbox <%= extra_css_classes %>">
    <!-- ID: '<%= id %>' -->

    <div class="content">
      <div class="header">
        <div id="icon">⧫</div>
        <h1>mine</h1>
      </div>
      <div id="controls">
        <div id="velocity" class="data">
          <span>10</span> stuff/tick
        </div>
        <div id="level" class="">
          Level 10
          <div id="upgrading" class="percent-bar">
            <div class="percent-value" style="width:<%= upgrade_percent %>%" />
          </div>

          <div class="reverse">
            <a id="upgrade" href="#" onclick="return false;">upgrade</a>
          </div>
        </div>
      </div>
    </div>

    <div class="admin">
      <div class="admin-option">
          Mine at level <strong>10</strong><br />
          <a href="#" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to upgrade</a>
      </div>
      <hr class="short" />
      <div class="admin-option">
        Can build a ship in <strong>100</strong> ticks
          <a href="#" onclick="return false;" class="pay-button">pay <strong>100</strong> stuff to build a ship</a>
      </div>
    </div>

  </div>

CSS

/* This imageless css button was generated by CSSButtonGenerator.com */


.pay-button {
  background-color:#ffffff;
  -moz-border-radius:13px;
  -webkit-border-radius:13px;
  border-radius:13px;
  border:1px solid #dcdcdc;
  display:inline-block;
  color:#666666;
  font-family:arial;
  font-size:12px;
  font-weight:bold;
  padding:2px 8px;
  text-decoration:none;
  line-height: 12px;
}

.pay-button:hover {
  background-color:#f6f6f6;
}

.pay-button:active {
  position:relative;
  top:1px;
}


/* VERSION: 2 */

body {

  font-family: 'Ropa Sans', sans-serif;
  /*font-family: 'PT Mono', sans-serif;*/
  /*font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;*/
  font-size: 16px;
  line-height: 24px;
  background-color: #F1F1F2;
}

strong {
  font-weight: bold;
}

#universe-controls {
  position: fixed;
  top: 0px;
  padding: 5px 30px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  z-index: 10;
  background-color: white;
}

#universe-controls a {
  color: #111;
}

.card {
  box-sizing: border-box;
}

.card.active {
  cursor: pointer;
}

.card .reverse {
  display: none;
  background-color: rgba(241, 241, 242, 0.9);
  color: black;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  white-space: normal;
  padding: 90% 5px 0px 5px;
  line-height: 1em;
  font-weight: bold;
}

.card .reverse a {
  color: black;
}

/*.card:hover .reverse {
  display: block;
}*/

#icon {
  font-family: 'Ubuntu Mono', sans-serif;
}

.card.active:hover .header #icon {
  font-size: 110px;
  text-shadow: 3px 3px 6px #111;
}

.card.vertical.small:hover .header #icon {
  font-size: 55px;
  text-shadow: 2px 2px 3px #111;
}

.card.active:active .header #icon {
  font-size: 90px;
  text-shadow: 1px 1px 2px #111;
}

.card.vertical.small:active .header #icon {
  font-size: 45px;
  text-shadow: 1px 1px 2px #111;
}

.card .header #icon,
#details .header #icon {
  text-align: center;
  font-size: 100px;
  line-height: 80px;
  text-shadow: 2px 2px 4px...