JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <br /><br />
  <div class="container" style="border: 1px solid red;">
        <div class="columns" style="border: 1px solid blue;">
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>
            <div class="col-1 bordered"></div>

            <div class="col-6 bordered"></div>
            <div class="col-6 bordered"></div>
        </div>
    </div>
</body>
</html>

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.columns {
    width: 100%;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.columns [class^="col"] {
    display: inline-block;
    text-align: left;
    margin: 0;
    min-height: 1px; /* Minimum height set to 1px so that even empty columns 
    will take up width, removing the need for offsets. */
}
.col-1 {
    width: 8%;
}
.col-2 {
    width: 16%;
}
.col-3 {
    width: 24%;
}
.col-4 {
    width: 32%;
}
.col-5 {
    width: 40%;
}
.col-6 {
    width: 48%;
}
.col-7 {
    width: 56%;
}
.col-8 {
    width: 64%;
}
.col-9 {
    width: 72%;
}
.col-10 {
    width: 80%;
}
.col-11 {
    width: 88%;
}
.col-12 {
    width: 96%;
}
.bordered {
    border: 1px solid black;
    height: 20px;
}