JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<h1>Page Title</h1>

<div id="content">
    <div class="group">
        <div class="item">Item1</div>
        <div class="item">Item2</div>
        <div class="item">Item3</div>
        <div class="item">Item4</div>
        <div class="item">Item5</div>
        <div class="item">Item6</div>
        <div class="item">Item7</div>
        <div class="item">Item8</div>
        <div class="item">Item9</div>
        <div class="item">Item10</div>
        <div class="item">Item11</div>
        <div class="item">Item12</div>
        <div class="item">Item</div>
    </div>
    
    <!-- <div class="group">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div>
    
    <div class="group">
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
        <div class="item">Item</div>
    </div> -->
</div>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    /* max-height: 100%; */
     max-height: 200px;
    
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}