JSFiddle - React, Tailwind, and code Playground

by ian_smithz

CSS

.card{border: 1px solid black; width: 45px; height: 90px; position:relative; float:left}
.card-symbol{position:absolute;}
.upper{top: 3px; left:3px}
.lower{bottom: 3px; right:3px}
.red{color: red}

JavaScript

function makeCard(kind) {
    var
    card = $('<div>', {
        class: 'card'
    }),
        color = (kind == 'hearts' || kind == 'diams') ? 'red' : 'black',
        upper = $('<div>', {
            class: 'upper card-symbol ' + color,
            html: '\&' + kind + '\;'
        }),
        lower = $('<div>', {
            class: 'lower card-symbol ' + color,
            html: '\&' + kind + '\;'
        });

    card.append(upper).append(lower);
    card.appendTo('body');
}
makeCard('clubs');
makeCard('diams');
makeCard('spades');
makeCard('hearts');