JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line" id="line">
            <div class="number" id="number">
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                    1
                </div>
                <div class="notes-in-board">
                   1
                </div>
                <div class="notes-in-board">
                    1
                </div>
            </div>
        </div>

CSS

:root {
    --basic-color-gray: rgba(216, 216, 216, 0.616);
    --dark-gray: rgba(88, 86, 86, 0.616);
    --basic-color-blue: rgb(0, 89, 255);
}


* {
    box-sizing: border-box;
}

body {
    background-color: rgba(14, 22, 34);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
} 


.number {
    border: 1px solid var(--basic-color-gray);
    height: 60px;
    width: 60px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    color: var(--basic-color-blue);
    flex-wrap: wrap;    
}
 
.notes-in-board {
    width: 20px;
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
}