JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

:root {
  --plexOrange: #e5a00d;
  --plexGrey: #4d4d4d;
  --plexDark: #282a2d;
  --plexDarker: #0d0d0d;
  --lightText: #eee;
}

a {
  text-decoration: none;
}

.btn-primary, .btn-secondary{
  background-color: var(--plexOrange);
  border-color: var(--plexDarker);
  color: var(--plexDark);
}

.btn-primary:hover, .btn-secondary:hover{
  background-color: var(--plexGrey) !important;
  border-color: var(--plexDarker) !important;
  color: var(--plexDarker) !important;
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  background-color: var(--plexOrange);
  border-color: var(--plexDarker);
  color: var(--plexDark);
  opacity: .3;
}

.css-selector {
  background: linear-gradient(301deg, #4d4d4d, #282a2d, #4d4d4d);
  background-size: 600% 600%;

  -webkit-animation: backAnimation 23s ease infinite;
  -moz-animation: backAnimation 23s ease infinite;
  animation: backAnimation 23s ease infinite;
}

@-webkit-keyframes backAnimation {
  0%{background-position:0% 18%}
  50%{background-position:100% 83%}
  100%{background-position:0% 18%}
}
@-moz-keyframes backAnimation {
  0%{background-position:0% 18%}
  50%{background-position:100% 83%}
  100%{background-position:0% 18%}
}
@keyframes backAnimation {
  0%{background-position:0% 18%}
  50%{background-position:100% 83%}
  100%{background-position:0% 18%}
}

body{
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(301deg, #4d4d4d, #282a2d, #4d4d4d);
  background-size: 600% 600%;

  -webkit-animation: backAnimation 23s ease infinite;
  -moz-animation: backAnimation 23s ease infinite;
  animation: backAnimation 23s ease infinite;
  color: var(--lightText);
}

.plex-navbar{  
  color:var(--lightText);
  background-color: var(--plexDarker);
  width: 99%;
  margin: 11px auto;
  border-radius: 7px;
}

.plex-navbar .navbar-brand, .plex-navbar .profile-menu .dropdown-toggle{  
  color: var(--lightText);
  fill:...