JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<ul class="row">
        <li class="col-6">Box 1</li>
        <li class="col-6">Box 2</li>
        <li class="col-6">Box 3</li>
        <li class="col-6">Box 4</li>
        <li class="col-6">Box 5</li>
    </ul>

CSS

.row {
            display: flex; 
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

       
        .col-6 {
            flex: 0 0 50%;               
            max-width: 50%;
            box-sizing: border-box;
            border: 1px solid black;
            text-align: center;
            padding: 20px 15px;
        }