JSFiddle - React, Tailwind, and code Playground
by joshmoto
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="A-7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab" data-bs-toggle="tab" data-bs-target="#A-7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab-pane" type="button" role="tab" aria-controls="A-7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab-pane" aria-selected="true">0</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="A-802a6e18-485b-4cfe-8154-d67b677a565f-1-tab" data-bs-toggle="tab" data-bs-target="#A-802a6e18-485b-4cfe-8154-d67b677a565f-1-tab-pane" type="button" role="tab" aria-controls="A-802a6e18-485b-4cfe-8154-d67b677a565f-1-tab-pane" aria-selected="false">1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="A-0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab" data-bs-toggle="tab" data-bs-target="#A-0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab-pane" type="button" role="tab" aria-controls="A-0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab-pane" aria-selected="false">2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="A-852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab" data-bs-toggle="tab" data-bs-target="#A-852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab-pane" type="button" role="tab" aria-controls="A-852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab-pane" aria-selected="false">3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="A-b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab" data-bs-toggle="tab" data-bs-target="#A-b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab-pane" type="button" role="tab" aria-controls="A-b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab-pane" aria-selected="false">4</button>
</li>
</ul>
<div...