JSFiddle - React, Tailwind, and code Playground

by Abdullah Fahim

HTML

<div id="body">
    <div id="container">
        <div id="item1" class="items">a
        </div>
        <div id="item2" class="items">b
        </div>
        <div id="item3" class="items">c
        </div>
        <div id="item4" class="items">c
        </div>
        <div id="item5" class="items">c
        </div>
        <div id="item6" class="items">c
        </div>
        <div id="item7" class="items">c
        </div>
        <div id="item8" class="items">c
        </div>
        <div id="item9" class="items">c
        </div>
        <div id="item10" class="items">c
        </div>
    </div>
</div>

CSS

#body {
    width: 100%;
}
#container {
    background-color: #000;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin: 25px auto;
}
.items {
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}
#item1 {
    background-color: #F00;
}
#item2 {
    background-color: #0F0;
}
#item3 {
    background-color: #00F;
}
#item4 {
    background-color: #ABC;
}
#item5 {
    background-color: #A00;
}
#item6 {
    background-color: #6AF;
}
#item7 {
    background-color: #07A;
}
#item8 {
    background-color: #A79;
}
#item9 {
    background-color: #AF4;
}
#item10 {
    background-color: #FF4;
}