JSFiddle - React, Tailwind, and code Playground

by Sagar Bendale

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/vendor/modernizr.js"></script>
<header class="row">

      <div class="large-12 columns">

          <div class="panel">
            
            <h1>This is the Header Section <i class="menu-icon"></i></h1>

            <nav class="top-bar transparent-top-bar" data-topbar="" role="navigation" data-options="is_hover:false">
              
              <section class="top-bar-section">
                <ul class="left">

                  <li class="has-dropdown">
                    <a>Menu Item 1</a>
                    <ul class="dropdown">
                      <li><a href="#">Link 1</a></li>
                      <li><a href="#">Link 2</a></li>
                      <li><a href="#">Link 3</a></li>
                      <li><a href="#">Link 4</a></li>
                    </ul>
                  </li>

                  <li class="divider"></li>

                  <li class="has-dropdown">
                    <a>Menu Item 2</a>
                    <ul class="dropdown">
                      <li><a href="#">Link 1</a></li>
                      <li><a href="#">Link 2</a></li>
                      <li><a href="#">Link 3</a></li>
                      <li><a href="#">Link 4</a></li>
                    </ul>
                  </li>

                  <li class="divider"></li>

                  <li class="has-dropdown">
                    <a>Menu Item 3</a>
                    <ul class="dropdown">
                      <li><a href="#">Link 1</a></li>
                      <li><a href="#">Link 2</a></li>
                      <li><a href="#">Link 3</a></li>
                      <li><a href="#">Link 4</a></li>
                    </ul>
                  </li>

                </ul>
  ...

CSS

.transparent-top-bar{
        background-color: transparent;
      }

JavaScript

$(document).foundation();