JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<ul class="section table-of-contents">
  <li><a href="#structure" class="">Structure</a></li>
  <li><a href="#initialization" class="">Intialization</a></li>
  <li><a href="#options" class="">Plugin Options</a></li>
  <li><a href="#method" class="">Methods</a></li>
  <li><a href="#variations" class="active">Variations</a></li>
</ul>

CSS

.table-of-contents a:hover {
  border-right: 2px solid #ea4a4f;
  padding-right: 4px;
  padding-left: 4px;
  border-left: none;
}

.table-of-contents a {
  padding-left: 4px;
  padding-right: 6px;
  width: 120px;
  text-align: right;
}

.table-of-contents a.active {
  border-left: none;
  border-right: 2px solid #ea4a4f;
  padding-right: 4px;
  padding-left: 4px;
}