JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="output"><a href="#" id="add" class="add"><span>+</span></a>
</div>
<div id="context">
    <div> <a href="#" class="color">Red</a>
 <a href="#" class="color">Green</a>
 <a href="#" class="color">Blue</a>
 <a href="#" class="color">White</a>
 <a href="#" class="color">Black</a>
 <a href="#" class="color">Multi</a>
 <a href="#" class="color">Colorless</a>
<hr>
    <a href="#" class="color">Red Green</a>
        <a href="#" class="color">Blue Green</a>
        <a href="#" class="color">White Green</a>
        <a href="#" class="color">Black Green</a>
    <hr>
        <a href="#" class="color">Blue Red</a>
        <a href="#" class="color">White Red</a>
        <a href="#" class="color">Black Red</a>
        <hr>
            <a href="#" class="color">Blue White</a>
        <a href="#" class="color">Blue Black</a>
            <hr>
        <a href="#" class="color">Black White</a>
    </div>
</div>

CSS

.add {
    font-family:Verdana;
    width:192px;
    height:256px;
    margin:4px;
    float:left;
    border:3px solid #aaa;
    border-radius:4px;
    background:#ccc;
    text-decoration:none;
}
.add:hover {
    background:#ddd;
}
.add >span {
    font-size:24px;
    color:#dedede;
    background:#aaa;
    display:block;
    height:36px;
    width:36px;
    border-radius:4px;
    top:50%;
    left:50%;
    margin-top:-18px;
    margin-left:-18px;
    position:relative;
    text-align:center;
    text-decoration:none;
    line-height:34px;
    font-weight:bold;
}
.card {
    font-family:Verdana;
    width:192px;
    height:256px;
    margin:4px;
    float:left;
    border:3px solid #000;
    border-radius:4px;
}
.card.Red {
    background:#E64322;
}
.card.Blue {
    background:#2284E6;
}
.card.Green {
    background:#2E9963;
}
.card.White {
    background:#FFFFD9;
}
.card.Black {
    background:#3D3940;
}
.card.Colorless {
    background:#B3B3B3;
}
.card.Multi {
    background:#E6B85C;
}
.card.Red.Green {
    background:linear-gradient(to right,#E64322, #2E9963);
}
.card.Blue.Green {
    background:linear-gradient(to right,#2284E6, #2E9963);
}
.card.White.Green {
    background:linear-gradient(to right,#FFFFD9, #2E9963);
}
.card.Black.Green {
    background:linear-gradient(to right,#3D3940, #2E9963);
}
.card.Blue.Red {
    background:linear-gradient(to right,#2284E6, #E64322);
}
.card.White.Red {
    background:linear-gradient(to right,#FFFFD9, #E64322);
}
.card.Black.Red {
    background:linear-gradient(to right,#3D3940, #E64322);
}
.card.Blue.White {
    background:linear-gradient(to right,#2284E6, #FFFFD9);
}
.card.Blue.Black {
    background:linear-gradient(to right,#2284E6, #3D3940);
}
.card.Black.White {
    background:linear-gradient(to right,#3D3940, #FFFFD9);
}
.name {
    color:black;
    text-decoration:none;
    display:block;
    background:rgba(255, 255, 255, 0.7);
    margin:4px;
    padding:2px 4px;
    border:2px solid rgba(0, 0, 0, 0.5);
   ...

JavaScript

function card(id, name, color, type, desc, pt) {
    this.id = id;
    this.name = name;
    this.type = type;
    this.desc = desc;
    this.pt = pt;
    this.color = color;
    card.objects[id] = this;
}

function redraw() {
    $("#output").html("");
    $.each(card.objects, function () {
        types = this.type;
        types = types.split(" ");
        if($.inArray("Creature", types)){
            $("#output").append("<div id='" + this.id + "' class='card " + this.color + "'><a href='#' class='name'>" + this.name + "</a><a href='#' class='img'></a><a href='#' class='type'>" + this.type + "</a><a href='#' class='desc'>" + this.desc + "</a></div>");
        }else{
            $("#output").append("<div id='" + this.id + "' class='card " + this.color + "'><a href='#' class='name'>" + this.name + "</a><a href='#' class='img'></a><a href='#' class='type'>" + this.type + "</a><a href='#' class='desc'>" + this.desc + "</a><a href='#' class='pt'>" + this.pt + "</a></div>");
        }
    });
    $("#output").append('<a href="#" id="add" class="add"><span>+</span></a>');
    console.log(card.objects);
}

card.objects = [];

$(document).on("click", "#add", function (e) {
    e.preventDefault();
    count = card.objects.length;
    new card(count, "Card Name", "Colorless", "Type", "Description", "0/0");
    redraw();
});
var cardId;
$(document).on("click", ".img", function (e) {
    e.preventDefault();
    e.stopPropagation();
    $("#context").css({
        left: e.pageX - 10,
        top: e.pageY - 10
    }).slideDown("fast");
    cardId = $(this).parent().attr("id");
});

$(".color").on("click", function (e) {
    e.preventDefault();
    console.log($(this).text());
    card.objects[cardId].color = $(this).text();
    redraw();
});

$(document).on("click", ".name", function (e) {
    e.preventDefault();
    e.stopPropagation();
    if (name = prompt("Enter a name", $(this).text())) {
        card.objects[$(this).parent().attr("id")].name = name;
    }
   ...