JSFiddle - React, Tailwind, and code Playground

by rx4hvn

HTML

<div class="parent-container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.parent-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 460px;
    margin: auto;
}

.parent-container div {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: yellow;
    border: 2px solid black;
    display: inline-block;
}


    /* tablet view */
    @media only screen and (max-width: 768px){
        .parent-container {
            max-width: 320px;
        }
    }


    /* mobile view */
    @media only screen and (max-width: 480px){
        .parent-container {
            flex-direction: column;
            align-items: center;
        }
    }