JSFiddle - React, Tailwind, and code Playground

by sosone

HTML

<body style="min-height:100px;">              
  <div class="number-wrap"><span class="number">1</span></div>
  <div class="number-wrap on"><span class="number">2</span></div>
  <div class="number-wrap"><span class="number">3</span></div>
</body>

CSS

:root {
    --color-black: #000;
    --lotto-color: #e43a3c;
    --primary-background: #fff;
    --color-white: #fff;
}

.body {
  background-color: var(--primary-background);
}

.number-wrap {
    position: relative;
    display: inline-block;
    width: 29px;
    height: 47px;
    border: 2px solid var(--lotto-color);
    color: var(--lotto-color);
    font-size: 14px;
    font-weight: bold;
    align-self: center;
    justify-self: center;
    text-align: center;
    vertical-align: middle;
    margin-top: auto;
}

.number-wrap.on {
    background-color: var(--color-black);
    color: var(--color-white);
}

.number-wrap::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background-color: var(--primary-background);
}

.number-wrap::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background-color: var(--primary-background);
}


.number {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}