JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Test</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </section>
      </div>
      <div class="mdc-menu mdc-menu-surface" tabindex="-1">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
        </ul>
      </div>
    </header>