JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">URL Ссылка на вкладку "Profile"</a>

<br>
<br>

<!-- Навигация вкладок начало -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

<!-- Ссылка Home -->
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
  </li>
  
<!-- Ссылка Profile -->  
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
  </li>
  
  <!-- Выпадающее меню Dropdown -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
    
 <!-- Ссылка @fat -->   
      <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
      
<!-- Ссылка @mdo -->      
      <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
      
    </div>
  </li>
</ul>
<!-- Навигация вкладок конец  -->



<!-- Содержимое вкладок -->
<div class="tab-content" id="pills-tabContent">

<!-- Вкладка Home -->
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Home</div>
 ...

CSS

.nav-link {
color: red;
background-color: #fff !important;
}
.nav-pills .nav-link.active, .show>.nav-pills .nav-link {
  color: blue;
  text-decoration: underline !important;
}