JSFiddle - React, Tailwind, and code Playground

by CRHain88

HTML

<fabric-navigation><shadowroot><fabric-top-nav><shadowroot><div><style>
  :host {
    font-family: sans-serif;
  }

  .top-nav {
    background-color: #f0f0f0;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: 1px solid #ccc;
  }

  li {
    display: inline-block;
    padding: .5em 1em;
    cursor: default;
  }

  li:hover {
    background-color: #ddd;
  }

  li.active {
    color: blue;
    position: relative;
  }

  li.active::after {
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    background-color: blue;
  }
</style><nav class="top-nav"><ul><li class="" role="button">Shop by Color <i>v</i></li><li class="" role="button">Fabric Type <i>v</i></li><li class="" role="button">Purpose <i>v</i></li><li class="" role="button">Theme & Pattern <i>v</i></li><li class="" role="button">More Ways to Shop <i>v</i></li></ul></nav><fabric-flyout-window><shadowroot><div class="flyout-window"><style>
  .flyout-window {
    background-color: #fafafa;
  }
  .flyout-content {
    padding: .25em;
    border-bottom: 1px solid #ddd;
  }
  .action-bar {
    height: 2em;
    position: relative;
  }
  .action-bar-container {
    height: 2em;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    padding: .5em 1em;
    text-align: right;
    width: 100%;
  }
</style><div class="action-bar"><div class="action-bar-container"><button>Close <i>x</i></button></div></div><div class="flyout-content"><slot></slot></div></div><script>__ssr()</script></shadowroot><fabric-list-name><shadowroot><div><style>

</style><nav class=""><ul><li><a class="white" href=""><i></i>White</a></li><li><a class="beige" href=""><i></i>Beige</a></li><li><a class="pink" href=""><i></i>Pink</a></li><li><a class="red" href=""><i></i>Red</a></li><li><a class="orange" href=""><i></i>Orange</a></li><li><a class="gold" href=""><i></i>Gold</a></li><li><a class="yellow"...