JSFiddle - React, Tailwind, and code Playground

by D7460N

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container" style="height:300px;" data-simplebar>
    <ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link" data-toggle="collapse" href="#item-1">Item 1</a>
    <div id="item-1" class="collapse">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link active" href="#">Sub 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link"  data-toggle="collapse" href="#item-2">Item 2</a>
    <div id="item-2" class="collapse">
      <ul class="nav flex-column ml-3">
        <li class="nav-item">
          <a class="nav-link active" href="#">Sub 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sub 3</a>
        </li>
      </ul>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Item 3</a>
  </li>
  <li class="nav-item">
    <a...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}