JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="playground"></div>

SCSS

$card-width:80px;
$card-height:120px;

#playground {
    width:640px;
    height:480px;
    background:#3a3a3a;
}

.well {
    position:absolute;
    box-sizing:border-box;
    height:$card-height;
}

.card {
    -webkit-appearance:none;
    display:block;
    border:solid 1px black;
    width:$card-width;
    height:$card-height;
    background:#F8F8F3;
    border-radius:8px;
    position:absolute;
    left:0;
    &:before {
       display: block;
        font-size: 24px;
        margin: 5px 0 0 5px;
        line-height: 24px;
    }
    &:after{
         display:block;
        font-size: 1.8em;
        font-weight: normal;
        font-family: Arial, sans-serif;
        display: block;
        text-align: center;
        white-space: pre;
        line-height: 1.2;
        word-spacing: -0.1em;      
    }
}

.card:checked {
    border:solid 1px red;
}


.well:nth-child(1) {
    & > .card:nth-child(2){
        left: 560px;
        top: 240px;
    }
    & > .card:before {
        content: "10";
    }
    & > .card:after {
     content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
    }
}

#card-1:checked ~ #card-2:checked ~ .fx {
    background:transparent;
    width:$card-width;
    height:$card-height;
    position:absolute;
    top:0;
    left:0;
    
    &:nth-of-type(2) {
       left: 560px;
       top: 240px;
    }
}

JavaScript

var group = 1;
var playground = $('playground');
var well;

for (var i = 1; i < 3; i++ ) {
    
    console.log(i, (i % 2));
    if ((i % 2)) {
        if (i != 1) {
            group++;
        }
       well = new Element('div', {
        'class':'well'           
       });
    }
    var card = new Element('input', {
        type:'checkbox',
        id :'card-' + i,
        'class':'card',
        value:''
    });
    
    
    well.grab(card);
    
    if (i % 2 === 0) {
       well.grab(new Element('div', {'class':'fx'}))
           .grab(new Element('div', {'class':'fx'})); 
    }
    playground.grab(well);
}