JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container-fluid">

  <div class="d-sm-flex align-items-center">

    <div class="d-flex justify-content-between">

      <ul id='menu' class="w-100">
        <li class="mt-1 flex-fill">
          <a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>
      </ul>

    </div>

 
    <div class="d-flex justify-content-between">
      <div class="">

        <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
        </button>

      </div>
      <div class="flex-fill">

        <form class="form-inline mr-1" action='/search' method='POST'>
          <div class="input-group input-group-sm mx-auto">
            <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
            <div class="input-group-append">
              <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
            </div>
          </div>
        </form>


      </div>
      <div class="">

        <div class="dropdown">
          <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"...

CSS

.row {
  background: #f8f9fa;
}

.col {
  border: solid 1px #6c757d;
}

ul#menu {list-style: none; margin:0; padding: 0;}
ul#menu li {display: inline-block}