JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<html>
  
  <style>
    .tile{
      height: 100px;
      width: 95px;
      
      border:5px outset #999;
      -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
      -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    }
    
    .videoRequest, .tile {border-radius: 5px;}
    
    .large-tile {
       height: 300px;
       width: 300px;
    }
    .videoRequest {
       background: url(http://www.dovevision.org/admin_controller/generalItem/Video_MessageImages/34.jpg) -50px;
    }
    
    .accept {
      background: url(http://thumb9.shutterstock.com/display_pic_with_logo/2343524/198506546/stock-vector-tick-and-cross-icons-198506546.jpg) -257px -102px;
      width: 55px;
      height: 55px;
    }
   
    .decline {
        background: url(http://thumb9.shutterstock.com/display_pic_with_logo/2343524/198506546/stock-vector-tick-and-cross-icons-198506546.jpg) -366px -285px;
        width: 55px;
        height: 55px;
          
    }
    
    .xToken{
      width: 100px;
      height: 95px;
      background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTM9UEywCl2txgWMaOed_YSn5oFGNRbjblFfr9nK-lcMbrRfBqL) -10px -58px
    }
    
    .oToken{
      width: 100px;
      height: 95px;
      background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTM9UEywCl2txgWMaOed_YSn5oFGNRbjblFfr9nK-lcMbrRfBqL) -112px -59px
    }
    
    .available {
         background: -webkit-linear-gradient(green, lime); /* For Safari 5.1 to 6.0 */
        background: -o-radial-gradient(green, lime); /* For Opera 11.1 to 12.0 */
        background: -moz-radial-gradient(green, lime); /* For Firefox 3.6 to 15 */
        background: radial-gradient(#33AD33, #008000); /* Standard syntax (must be last) */
    }
    .clickable {
        cursor: pointer;
    }
    
    .notyourturn {
        background:...