JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="hovercard">
    <p>
        <span class="sc2name">Zealot</span>
    </p>
    <hr />
    <p>Supply: $1</p>
    <p>Cost: $2</p>
    <p>Requires: $3</p>
</div>

CSS

#hovercard {
    height: 65px;
    width: 125px;
    color: #000;
    font-family: Verdana;
    font-size: 0.7em;
    padding: 5px;
    background-color: #fff;
    border: solid 2px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#hovercard .sc2name {
    color: purple;
    font-weight: bold;
}

JavaScript

var _hovercard_default_style = {
    height: "65px",
    width: "150px",
    color: "#000",
    fontFamily: "Verdana",
    fontSize: "0.7em",
    padding: "5px",
    backgroundColor: "#fff",
    border: "solid 2px #000"
};