JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid container-lg px-0 px-xl-5">
    <header class="mb-3">
      <nav class="navbar navbar-expand-md fixed-top navbar-light">
        <div class="container-fluid container-md mx-0 mx-md-auto bg-white">          
          <a class="logo-font fs-4" href="/"> LOGO </a>
          <!-- menu items -->
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse justify-content-center"
            id="navbarNavAltMarkup"
          >
            <div class="navbar-nav text-start">
              <a class="nav-item" href="screen1">menu1</a>
              <a class="nav-item" href="screen1">menu2</a>
              <a class="nav-item" href="screen1">menu3</a>
              <a class="nav-item" href="screen1">menu4</a>
            </div>
          </div>
          <a class="nav-login" href="login">login</a>
        </div>
      </nav>
    </header>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>