JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="bottom">
    <div id="hand">
        <div class="info"></div>
        <div class="list"></div>
    </div>
    <div id="deck">
        <div class="info"></div>
        <div class="list"></div>
    </div>
</div>

<div id="zoom"></div>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

CSS

* {
    /*-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
body {
    background: #fafafa;
}

#bottom {
    position: absolute;
    right:0; bottom:0; left:0;
    height: 228px;
    background: #eee;
}

#hand {
    position: absolute;
    top:0; right: 170px; bottom: 0; left: 0;
    padding: 10px;
    border-right: 1px solid #ddd;
    text-align: center;
}
#hand .list {
    display: inline-block;
}
#hand .card {
    float: left;
    margin-left: -90px;
}
#hand .card:first-child {
    margin: 0;
}

#deck {
    position: absolute;
    top:0; right:0;
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#deck .list {
    background: url('http://upload.wikimedia.org/wikipedia/en/a/aa/Magic_the_gathering-card_back.jpg') black no-repeat;
    background-size: contain;
    border-radius: 6px;
    cursor: pointer;
}

#deck .list, .card {
    width: 150px;
    height: 208px;
}

.info {
    position: absolute;
    right:0; bottom:100%; left:0;
    padding-bottom: 5px;
    font-size: 80%;
    text-align: center;
}

#zoom {
    display: none;
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    background: rgba(0,0,0,.7);
    cursor: pointer;
    z-index: 999;
}
#zoom .card {
    position: absolute;
    top:50%; left:50%;
    margin: -208px 0 0 -150px;
    width: 300px;
    height: 416px;
    border-radius: 18px;
}

.card {
    position: relative;
    border-radius: 6px;
    cursor: pointer;
}
.card:hover {
    z-index: 1;
}

/*.card {
    position: relative;
    perspective: 1000px;
    cursor: pointer;
    border-radius: 6px;
}
.card:hover {
    box-shadow: 0 0 2px 1px blue;
}
.cardholder {
    width: 100%;
   ...

JavaScript

var importDeck = [{"card":{"id":373746,"name":"Mountain","colors":["None"],"manaCost":"","convertedManaCost":0,"cardSetName":"Theros","type":"Basic Land","subType":"Mountain","power":0,"toughness":0,"rarity":"Basic Land","cardSetId":"THS"},"qty":11},{"card":{"id":220435,"name":"Goblin Grenade","colors":["red"],"manaCost":"R","convertedManaCost":1,"cardSetName":"Magic 2012","type":"Sorcery","subType":null,"power":0,"toughness":0,"rarity":"Uncommon","cardSetId":"M12"},"qty":3},{"card":{"id":259213,"name":"Krenko's Command","colors":["red"],"manaCost":"1R","convertedManaCost":2,"cardSetName":"Magic 2013","type":"Sorcery","subType":null,"power":0,"toughness":0,"rarity":"Common","cardSetId":"M13"},"qty":4},{"card":{"id":386560,"name":"Hordeling Outburst","colors":["red"],"manaCost":"1RR","convertedManaCost":3,"cardSetName":"Khans of Tarkir","type":"Sorcery","subType":null,"power":0,"toughness":0,"rarity":"Uncommon","cardSetId":"KTK"},"qty":3},{"card":{"id":221201,"name":"Goblin Chieftain","colors":["red"],"manaCost":"1RR","convertedManaCost":3,"cardSetName":"Magic 2012","type":"Creature","subType":"Goblin","power":2,"toughness":2,"rarity":"Rare","cardSetId":"M12"},"qty":2},{"card":{"id":253712,"name":"Krenko, Mob Boss","colors":["red"],"manaCost":"2RR","convertedManaCost":4,"cardSetName":"Magic 2013","type":"Legendary Creature","subType":"Goblin Warrior","power":3,"toughness":3,"rarity":"Rare","cardSetId":"M13"},"qty":3},{"card":{"id":373556,"name":"Purphoros, God of the Forge","colors":["red"],"manaCost":"3R","convertedManaCost":4,"cardSetName":"Theros","type":"Legendary Enchantment Creature","subType":"God","power":6,"toughness":5,"rarity":"Mythic Rare","cardSetId":"THS"},"qty":2},{"card":{"id":380399,"name":"Dictate of Erebos","colors":["black"],"manaCost":"3BB","convertedManaCost":5,"cardSetName":"Journey into Nyx","type":"Enchantment","subType":null,"power":0,"toughness":0,"rarity":"Rare","cardSetId":"JOU"},"qty":1},{"card":{"id":386306,"name":"Bone...