JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute">
        <defs>
            <g id="diamond">
                <path d="M50,7 L96,100 L50,193 L4,100 L50,7 Z"></path>
            </g>
            <g id="oval">
                <path d="M3,150 L3,50 C3,24.084 24,3 50,3 C76,3 97,24 97,50 L97,150 C97,176 75.916,197 50,197 C24.084,197 3,176 3,150 Z"></path>
            </g>
            <g id="squiggle">
                <path d="M25,77 C25,48 4,45 4,25 C4,14 18,3 40,3 C66,3 92,21 92,54 C92,86 75,100 75,123 C75,152 96,155 96,175 C96,186 82,197 60,197 C34,197 8,179 8,146 C8,114 25,100.02465 25,77 Z"></path>
            </g>
            <pattern id="triangle" width="10" height="10" patternUnits="userSpaceOnUse">
                <polygon points="5,0 10,10 0,10"></polygon>
            </pattern>
            <pattern id="green-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
                <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: green;"></rect>
            </pattern>
            <pattern id="red-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
                <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: red;"></rect>
            </pattern>
            <pattern id="purple-stripes" x="10" y="10" width="10" height="10" patternUnits="userSpaceOnUse" style="display:inline-block;">
                <rect x="0" y="7" width="10" height="10" style="stroke: 1px; fill: purple;"></rect>
            </pattern>
        </defs>
    </svg>
    <div class="topbar">SuperSet</div>
    <div id="game">
        <div class="cardrow">
            <div class="card purple-card" id="oqFqnSBH6zMRc5hJr" width="100" height="200">
                <svg width="100" height="200" z-index="-40" style="display:inline-block">
                   ...

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
svg {
    stroke-width: 5;
    pointer-events: none;
}
.topbar {
    width: 100%;
    text-align: left;
    background-color: blue;
    color: white;
    font-family: verdana;
    padding: 5px 0 5px 0;
}
.cardrow {
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    white-space: nowrap;
}
.textcard {
    box-sizing: border-box;
    max-width: 24%;
    min-height:40px;
    width: 25%;
    height:100%;
    display: inline-block;
    border-radius: 6px;
    margin: 10px 10px 0 0px;
    padding: 0 0 0 0;
    font-size: 16px;
    line-height: 40px;
    font-family: verdana;
    text-align: center;
}
.card {
    box-sizing: border-box;
    max-width: 24%;
    width: 25%;
    height:100%;
    display: inline-block;
    border-radius: 6px;
    margin: 10px 10px 0 0px;
    padding: 0 0 0 0;
    text-align: center;
}
.green-card {
    border: 3px solid gray;
}
.red-card {
    border: 3px solid gray;
}
.purple-card {
    border: 3px solid gray;
}
.selected {
    background-color: lightblue;
}
.messages {
    background-color: lightgrey;
    color: darkred;
    border-radius: 6px;
    width:40%;
    text-align: center;
    margin: 40px auto;
}
.green {
    color: green;
}
.red {
    color: red;
}
.purple {
    color: purple;
}
.button-row {
    width: 100%;
    margin: 10px 0 0 0;
}
.button {
    display: inline-block;
    border: 2px solid black;
    padding: 5px;
    border-radius: 6px;
}
.button.pressed {
    background-color:...