JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
        <!-- The message will be shown when the page loads and will
        disappear after the movies are loaded -->

<div class="d-flex">
    <div class="dropdown col">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
            </div>

            <div class="input-group col-12 flex-fill">
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            </div>


            <!-- Displays thumbnails of the movies here -->
            <div id="restaurantsTable" class="row"></div>
        </div>