JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>

CSS

body {
        background: #E55D87;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #5FC3E4, #E55D87);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #5FC3E4, #E55D87);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .box {
        width: 400px;
        height: auto;
        background: #ccc;
        margin-left: calc(50vw - 200px);
        display: grid;
        grid-gap: 1em;
        grid-template-rows: repeat(5, auto);
        grid-template-columns: repeat(5, auto);
        padding: 10px;
        margin-top: 15%;
    }
    
    .element {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: red;
        ;
    }