JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
       <ul class="nav flex-column" id="stacked-menu">
        <li class="nav-item">
          <a class="nav-link" href="#" data-target="#item1" data-toggle="collapse" data-parent="#stacked-menu">Process One</a>
          <ul class="nav collapse flex-column" id="item1">
            <li class="nav-item"><a class="nav-link" href="google.com">View One</a></li>
            <li class="nav-item"><a class="nav-link" href="gmail.com">View Two</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-target="#item2" data-toggle="collapse" data-parent="#stacked-menu">Process Two</a>          
          <ul class="nav flex-column collapse" id="item2">
            <li class="nav-item"><a class="nav-link" href="#">View One</a></li>
            <li class="nav-item"><a class="nav-link" href="#">View Two</a></li>
            <li class="nav-item"><a class="nav-link" href="#">View Three</a></li>
          </ul>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">Process Three</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Process Four</a></li>
      </ul>

CSS

#stacked-menu li li{
  margin-left:15px;
}

.nav-link {
  color:#FFF ;
}

.nav-link:hover {
  color:#CCC;
}

body {
background-color:#000;}