JSFiddle - React, Tailwind, and code Playground

by Erik Gillespie

HTML

<div class="jumbotron">
    <div class="board">
        <h2>
            <span class="peg r">P</span>
            <span class="peg g">E</span>
            <span class="peg y">G</span>
            <span class="peg g">G</span>
            <span class="peg r">E</span>
            <span class="peg y">R</span>
        </h2>
    </div>
</div>

CSS

.peg {
    font-size: 30px;
    font-weight: 500;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    border: 1px solid #937e62;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    color: white;
}
.r {
    background-color: #d9534f;
    border-color: #c9302c;
}
.g {
    background-color: #5cb85c;
    border-color: #449d44;
}
.y {
    background-color: #fef049;
    border-color: #ffd663;
}
.jumbotron {
    text-align: center;
    border: 1px solid #937e62;
    background-color: #d2b48c;
    position: relative;
    border-radius: 6px;
    width: 290px;
}