JSFiddle - React, Tailwind, and code Playground
by Lalji Tadhani
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div id="menu" class="container">
<div class="row justify-content-center">
<!-- OMELET BUTTON -->
<button class="menuButton btn btn-primary mt-3 ml-1 mr-1 collapsed" type="button" data-toggle="collapse" data-target="#omelet" aria-expanded="false" aria-controls="favorites">Omelets — Proven Favorites!</button>
<!-- FAVORITES BUTTON -->
<button class="menuButton btn btn-primary mt-3 ml-1 mr-1 collapsed" type="button" data-toggle="collapse" data-target="#favorites" aria-expanded="false" aria-controls="favorites">Favorites of Our Regulars</button>
<!-- EGG COMBO BUTTON -->
<button class="menuButton btn btn-primary mt-3 ml-1 mr-1 collapsed" type="button" data-toggle="collapse" data-target="#eggCombo" aria-expanded="false" aria-controls="eggCombo">Egg Combinations</button>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="">
<div class="menuDrop collapse multi-collapse mt-2" id="omelet">
<div class="card card-body menu-card-size">
<div>
<b>Cheese Omelet</b> — Choice of Jack, Cheddar, Swiss, Cream Cheese or Bleu Cheese
</div>
<div>
<b>Turkey, Spinach, Onion, & Cheese Omelet</b><br>
</div>
<div>
<b>Mushroom & Cheese Omelet</b>
</div>
<div>
<b>Chili Cheese Omelet</b>
</div>
</div>
</div>
</div>
<div class="">
<div class="menuDrop collapse...