JSFiddle - React, Tailwind, and code Playground

by Damian Dulisz

HTML

<div class="csd-injected-navbar">
  <ul class="csd-injected-list">
    <li><a class="csd-injected-link" href="#">Link A</a></li>
    <li><a class="csd-injected-link" href="#">Link B</a></li>
  </ul>
  <style>
    .csd-injected-navbar {
      background: #405cff;
      padding: 10px;
    }

    .csd-injected-list {
      list-style: none;
      display: flex;
      font-family: sans-serif;
    }
    
    .csd-injected-link {
      padding: 6px 12px 4px;
      text-transform: uppercase;
      color: #ffffff;
      font-weight: bold;
      text-decoration: none;
      letter-spacing: 0.5px;
      border-radius: 5px;
    }
    
    .csd-injected-link:hover {
      color: #3355aa;
      background: #eeeeee;
    }
    
  </style>
</div>