JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="col-2 d-none d-md-block">
    <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
      <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
    </div>
  </div>

  <div class="col-12 d-sm-block d-md-none">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
      </li>
    </ul>
  </div>