JSFiddle - React, Tailwind, and code Playground
by LuckyLuzz
HTML
<link rel="stylesheet" href="bootstrap-slider.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.js"></script>
<nav class="navbar navbar-expand-md navbar-light border-bottom">
<div class="container-fluid justify-content-center" id="navbarwidth">
<a class="navbar-brand" href="#">
<span class="menu-collapsed pl-4 ml-4">LOGO</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarNavDropdown">
<div class="nav nav-pills nav-fill flex-column flex-md-row" id="pills-tab" role="navigation">
<a class="nav-link active " id="pills-status-tab" data-toggle="tab" href="#pills-status"
role="tab" aria-controls="pills-status" aria-selected="true">
<p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
aria-controls="collapseThree" href="#">Dashboard
</p>
</a>
<a class="nav-link" id="pills-led-tab" data-toggle="tab" href="#pills-led" role="tab"
aria-controls="pills-led" aria-selected="false">
<p class="div" data-toggle="collapse"...