JSFiddle - React, Tailwind, and code Playground

by Vaibhav Mehta

HTML

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper {
    height: 150px;
    margin: 50px;
    border: 1px solid #eee;
}
ul {
    list-style-type: none;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
ul li {
    height: 30px;
    width: 150px;
    background: tomato;
    border: 1px solid #515151;
}