JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div class="container text-center text-white">
    <div class="row my-4 bg-primary">
        <div class="col-1">
            <div class="py-4 bg-dark">1</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">2</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">3</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">4</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">5</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">6</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">7</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">8</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">9</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">10</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">11</div>
        </div>
        <div class="col-1">
            <div class="py-4 bg-dark">12</div>
        </div>
    </div>
    <div class="row my-4 bg-primary">
        <div class="col-4">
            <div class="py-4 bg-dark">1</div>
        </div>
        <div class="col-4">
            <div class="py-4 bg-dark">2</div>
        </div>
        <div class="col-4">
            <div class="py-4 bg-dark">3</div>
        </div>
    </div>
    <div class="row my-4 bg-primary">
        <div class="col-6">
            <div class="py-4 bg-dark">1</div>
        </div>
        <div class="col-6">
            <div class="py-4 bg-dark">2</div>
        </div>
    </div>
    <div class="row my-4 bg-primary">
        <div class="col-12">
            <div class="py-4 bg-dark">1</div>
        </div>
    </div>
</div>

CSS

.row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 0;
}