JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>

CSS

body {
    background: #eee;
}

.card {
    font: 14pt "Helvetica", sans-serif;
    cursor: default;
    position: absolute;
    height: 8em;
    width: 8em;
    float:left;
    transform-origin: 50% 100%;
    animation-name:             dostuff; 
    animation-duration:         3s; 
    animation-iteration-count:  infinite;
    transition-timing-function: linear;
    
}

@keyframes dostuff{
  0%{
    left:0%;
    transform: rotate(0deg);
  }
  25%{ 
    left:90%;
    transform: rotate(360deg);
  }
  50%{
    left:35%;
    transform: rotate(180deg);
  }
 75%{
    left:10%;
    transform: rotate(0deg);
  }
  100%{
    left:0%;
    transform: rotate(0deg);
  }
}

.card-suit-h, .card-suit-d {
    color: #d00;
}

.card-inner {
    width: 71%;
    height: 7.9em;
    margin: auto;
    border: 0.1em solid #333;
    border-radius: 0.3em;
    position:relative;
    background: white;
    overflow:hidden;
    box-shadow: 0px 0px 0.1em #000;
}

.card-inner-back {
    background: #248;
    box-shadow: 0px 0px 0.2em #000, inset 0px 0px 1em #000;
    color: #fff;
    text-shadow: 0px 0px 1em #000;
    border: 0.1em solid #000;
}

.card-back-logo {
    position:absolute;
    width: 100%;
    font-size: 500%;
    text-align: center;
    line-height:0;
    top:50%;
}

.card-spots {
    position: relative;
    height: 70%;
    width: 60%;
    font-size: 200%;
    margin: auto;
    line-height: 0;
    margin-top: 30%;
    top: -0.25em;
}
.card-face,
.card-spot {
    position: absolute;
}

.card-corner {
    position: absolute;
    letter-spacing: -0.15em;
}

.card-corner-top {
    top: 0.2em;
    left: 0.2em;
}

.card-corner-bottom {
    bottom: 0.2em;
    right: 0.2em;
    transform: scaleY(-1) scaleX(-1);
}

.card-corner-symbol {
    line-height: 25%;
}

.card-suit-j .card-corner-symbol {
    line-height: 100%;
}

.card-suit-j .card-corner-alpha {
    width: 1px;
    line-height: 90%;
    font-size: 66%;
    margin-left: 0.3em;
}
.card-suit-s.card-value-1 .card-spot-1,
.card-face...

JavaScript

(function () {
    'use strict';
    function Deck(jokers) {
        var i, j;
        this.jokers = jokers || 0;
        this.back = new Deck.Card(this, 0);
        this.cards = [];
        this.names = ['h', 'c', 'd', 's', 'j'];
        
        this.cover = "♤";
        
        this.suits = {
            h: "♥",
            c: "♣",
            d: "♦",
            s: "♠",
            j: "★"
        };
        
        this.faces = {
            h: ["♞", "♛", "♚"],
            c: ["♞", "♛", "♚"],
            d: ["♞", "♛", "♚"],
            s: ["♞", "♛", "♚"],
            j: ["✰"]
        };
      

        for (i = -this.jokers - 1; ++i;) {
            this.cards.push(new Deck.Card(this, i, 'j'));
        }

        for (i = this.names.length - 1; i--;) {
            this.cards.push(new Deck.Card(this, 1, this.names[i]));
            for (j = 14; --j > 1;) {
                this.cards.push(new Deck.Card(this, j, this.names[i]));
            }
        }

    }

    Deck.prototype = {
        toString: function() {
            return '' + this.cards;
        }
    };

    Deck.Card = function(deck, value, suit) {
        this.deck = deck;
        this.value = value;
        this.suit = suit;
    };

    Deck.Card.prototype = {
        visible: false,
        toString: function() {
            return this.stringValue || (this.stringValue = (this.getSuitSymbol() + this.getAlpha()));
        },
        toNode: function() {
            var i = this.value,
                tmp, symbol = this.getSuitSymbol(),
                alpha = this.getAlpha(),
                spots = [],
                outer = document.createElement('div'),
                spotArea = document.createElement('div'),
                label = document.createElement('div'),
                label2;

            // back of deck
            if (i == 0) {
                
            } else if (i > 0) {

                tmp = document.createElement('div');
                tmp.className =...