JSFiddle - React, Tailwind, and code Playground

by lazd

HTML

<div class="leftGrid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS

body {
    font-family: sans-serif;
}

.leftGrid {
    width: 100%;
    height: 50px;
    white-space: nowrap;
}

.leftGrid div {
    float: left; /* line up horizontally */
    box-sizing: border-box; /* borders should not infulence width/height */
    width: 50px;
    height: 50px;
    
    border: 1px solid #aaa;
    
    /* Make the text centered */
    text-align: center;
    line-height: 48px;
}