JSFiddle - React, Tailwind, and code Playground
by Haze32
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="score-assessment-wrap">
<div class="col-4">
<nav>
<select class="form-select" id="nav-score-assess-select" role="tablist">
<option value="#score-assess-01" selected>1</option>
<option value="#score-assess-02">2</option>
<option value="#score-assess-03">3</option>
<option value="#score-assess-04">4</option>
<option value="#score-assess-05">5</option>
<option value="#score-assess-06">6</option>
</select>
</nav>
</div>
<div class="tab-content my-4 p-5 border shadow rounded" id="nav-score-assessContent">
<div class="tab-pane score-assess-pane fade show active" id="score-assess-01" role="tabpanel" aria-labelledby="score-assess-01-tab">
1
</div>
<div class="tab-pane score-assess-pane fade" id="score-assess-02" role="tabpanel" aria-labelledby="score-assess-02-tab">
2
</div>
<div class="tab-pane score-assess-pane fade" id="score-assess-03" role="tabpanel" aria-labelledby="score-assess-03-tab">
3
</div>
<div class="tab-pane score-assess-pane fade" id="score-assess-04" role="tabpanel" aria-labelledby="score-assess-04-tab">
4
</div>
<div class="tab-pane score-assess-pane fade" id="score-assess-05" role="tabpanel" aria-labelledby="score-assess-05-tab">
5
</div>
<div class="tab-pane score-assess-pane fade" id="score-assess-06" role="tabpanel" aria-labelledby="score-assess-06-tab">
6
</div>
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn parks-save me-3">Save</button>
<button type="submit"...