JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <div class="navbar">
          <nav class="nav-extended transparent">
            <div class="container">
              <div class="nav-wrapper">
                <a href="#" class="brand-logo blue-text">LOGO</a>
              </div>
              
              <!-- extended nav -->
              <div>
                <p class="blue-text">
                  Extended Nav, but this is still a part of navbar
                </p>
              </div>
            </div>
          </nav>
        </div>
        
        <div style="border:1px red solid; height: 200px;">        
        <p class="red-text">
        This div is not a part of navbar. But it overlaps with the Extend nav.
        </p>
        </div>