Navs

Tabs

Tab that is active is rendered with a shadowy effect and it should have dark text with the option to have an icon. The inactive tabs are just teal links with a bottom shadowy line.

Active with no icon

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Details</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Reports</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Groups</a>
  </li>
</ul>

Active with icon

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="feedback-icon fa fas fa-user mr-2"></i>
      User Profile
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Security</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
</ul>