JSFiddle - React, Tailwind, and code Playground

by GeorgeCiesinski

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS only -->
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
    crossorigin="anonymous">
    <!-- Custom Stylesheet -->
    <link rel="stylesheet" href="./styles.css">
    <!-- JavaScript Bundle with Popper -->
    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous">
    </script>
    <title>George Ciesinski</title>
  </head>

  <body>
  
    <nav class="py-3 navbar navbar-custom navbar-expand-lg autohide navbar-dark">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="https://raw.githubusercontent.com/GeorgeCiesinski/georgeciesinski.github.io/dd9ea343d5dc94b1029abbb4849deab00f602954/assets/logo.svg" class="logo" alt="logo"/>
          George Ciesinski
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#hero">Software Development</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
 ...

CSS

:root {
    --navbar_color: #0D314A;
    --navbar_logo_text: #5B9BCD;
    --navbar_logo_text_highlight: #96BFDE;
    --navbar_text: #5B9BCD;
    --navbar_text_highlight: #96BFDE;
    --navbar_dropdown: #295C84;
    --navbar_dropdown_text: #BDD4EA;
    --navbar_dropdown_hover: #0D314A;
    --main-color: white;
    --main_h1: #0D314A;
    --main_text: #012038;
    --card_color: #5B9BCD;
    --card_shadow: #0D314A;
    --footer_color: #0D314A;
    --footer-h1: #5B9BCD;
    --footer_text: white;
}

body {
  display: block;
  overflow-x: hidden;
  background: var(--main-color);
}

/* Navbar */

@media only screen and (max-width: 850px)
  .container > .navbar-brand .logo {
     font-size: 20px;
     display: inline-block;
}

@media only screen and (max-width: 850px)
  .navbar-dark, .navbar-toggler {
    position: absolute;
    top: 18px;
}

@media only screen and (max-width: 850px)
  .navbar-brand > img {
    margin-right: 1rem;
}

nav {
  background-color: var(--navbar_color);
}

.navbar-brand img {
  max-height: 50px;
}

.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
}

/* Navbar Site Title */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: var(--navbar_logo_text);
}

.navbar-custom .navbar-brand:hover {
  color: var(--navbar_logo_text_highlight);
}

/* Navbar Links */

.navbar-dark .navbar-toggler-icon {
  color: var(--navbar_logo_text);
}

.navbar-nav .nav-item .nav-link {
  color: var(--navbar_text);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
  color: var(--navbar_text_highlight);
}

/* Navbar Dropdown Menu */

.navbar-nav > li > .dropdown-menu {
  background-color: var(--navbar_dropdown);
}

.navbar-nav > li > .dropdown-menu a{
  color: var(--navbar_dropdown_text);
  margin: auto 0px !important;
}

.navbar-nav > li > .dropdown-menu a:hover {
  background-color: var(--navbar_dropdown_hover);
  margin: auto 0px !important;
}

nav ul li a {
  color: #a9a9a9;
 ...