JSFiddle - React, Tailwind, and code Playground

HTML

<div id="campo">
    <div class="franja">
        <div class="jugador">
            <span>11</span>
        </div>
        <div class="jugador">
            <span>10</span>
        </div>
    </div>
    <div class="franja">
        <div class="jugador">
            <span>8</span>
        </div>
        <div class="jugador">
            <span>6</span>
        </div>
        <div class="jugador">
            <span>7</span>
        </div>
        <div class="jugador">
            <span>9</span>
        </div>
    </div>
    <div class="franja">
        <div class="jugador ">
            <span>4</span>
        </div>
        <div class="jugador">
            <span>2</span>
        </div>
        <div class="jugador">
            <span>3</span>
        </div>
        <div class="jugador">
            <span>5</span>
        </div>
    </div>
    <div class="franja">
        <div class="jugador">
            <span>1</span>
        </div>
    </div>
</div>

SCSS

div#campo {
    width: 400px;
    height: 250px;
    padding-left: 15%;
    box-sizing: border-box;
}

div.franja {
    float: left;
    display: table;
    width: 25%;
    height: 100%;
}

div.jugador {
    display: table-row;
    > span {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
}

/* decorativo */
 div#campo {
    position: relative;
    background: seagreen;
    &:before, &:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        content:"";
        background: rgba(white, .4);
    }
    &:after {
        top: 15%;
        right: 0;
        left: auto;
        height: 70%;
        width: 20%;
        border: 1px solid rgba(white, .4);
        border-right: 0;
        background: none;
    }
}