JSFiddle - React, Tailwind, and code Playground

by yijiang

HTML

<div id="game">
    <div id="clickableArea" class="banner">
    </div>
    
    <div id="dice" contenteditable="true">
        <div id="dot" class="die">
            <div id="dot0" class="dot rowOne colOne">&#8226;</div><div id="dot1" class="dot rowOne colTwo">&#8226;</div><div id="dot2" class="dot rowOne colThree unused">&#8226;</div>
            <div id="dot3" class="dot rowTwo colOne">&#8226;</div><div id="dot4" class="dot rowTwo colTwo">&#8226;</div><div id="dot5" class="dot rowTwo colThree">&#8226;</div>
            <div id="dot6" class="dot rowThree colOne unused">&#8226;</div><div id="dot7" class="dot rowThree colTwo">&#8226;</div><div id="dot8" class="dot rowThree colThree">&#8226;</div>
        </div>
        
        <div id="dotB" class="die">
            <div id="dotB0" class="dot rowOne colOne">&#8226;</div><div id="dotB1" class="dot rowOne colTwo">&#8226;</div><div id="dotB2" class="dot rowOne colThree unused">&#8226;</div>
            <div id="dotB3" class="dot rowTwo colOne">&#8226;</div><div id="dotB4" class="dot rowTwo colTwo">&#8226;</div><div id="dotB5" class="dot rowTwo colThree">&#8226;</div>
            <div id="dotB6" class="dot rowThree colOne unused">&#8226;</div><div id="dotB7" class="dot rowThree colTwo">&#8226;</div><div id="dotB8" class="dot rowThree colThree">&#8226;</div>
        </div>
    </div>
    
    <div id="status" class="banner" contenteditable="true">
        Lots and lots of text
    </div>
</div>

CSS

body {
    font-family: "Times New Roman";
    font-size: 12pt;
    background-color: #0033CC;
}

.die {
    width: 6em;
    height: 6em;
    border-style: solid;
    border-color: black;
    border-width: .25em;
    position: relative;
    float: left;
    margin: 1em;
    background-color: #FFFFFF;
}

.dot {
    font-size: 5em;
    line-height: .30em;
    float: left;
    position: relative;
    color: red;
}

.banner {
    height: 1.5em;
    background-color:#000000;
    color: #FFFF00;
}


.rowOne {
    top: .05em;
}

.rowTwo {
    top: .15em;
}

.rowThree {
    top:.25em;
}

.colOne {
    left: .03em;
}

.colTwo {
    left: .08em;
}

.colThree {
    left: .13em;
}

.unused {
    visibility: hidden;
}

#game {
    margin: auto;
    width: 20em;
    height: 15em;
    background-color: #006600;
    position: relative;
    top: 4em;
}

#dice {
    margin-left: 1.5em;
    width: 20em;
    height: 8em;
}

#status {
    position: relative;
}