JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Container wrapper -->
  <div class="container-fluid">
    <!-- Toggle button -->
    <button
      class="navbar-toggler"
      type="button"
      data-mdb-toggle="collapse"
      data-mdb-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>

    <!-- Collapsible wrapper -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar brand -->
      <a class="navbar-brand mt-2 mt-lg-0" href="#">
        <img
          src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp"
          height="15"
          alt="MDB Logo"
          loading="lazy"
        />
      </a>
      <!-- Left links -->
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Projects</a>
        </li>
      </ul>
      <!-- Left links -->
    </div>
    <!-- Collapsible wrapper -->

    <!-- Right elements -->
    <div class="d-flex align-items-center">
      <!-- Icon -->
      <a class="text-reset me-3" href="#">
        <i class="fas fa-shopping-cart"></i>
      </a>

      <!-- Notifications -->
      <div class="dropdown">
        <a
          class="text-reset me-3 dropdown-toggle hidden-arrow"
          href="#"
          id="navbarDropdownMenuLink"
          role="button"
          data-mdb-toggle="dropdown"
          aria-expanded="false"
        >
          <i class="fas fa-bell"></i>
          <span class="badge rounded-pill badge-notification bg-danger">1</span>
        </a>
        <ul
          class="dropdown-menu dropdown-menu-end"
         ...

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:...