JSFiddle - React, Tailwind, and code Playground

by Javier Núñez Berrocoso

HTML

<div id="MainMenu">
  <ul>
    <li data-toggle="collapse" data-parent="#MainMenu"><a href="#SubMenu1" >Item 3</a></li>
    <ul class="collapse" id="SubMenu1">
      <li><a href="#">Subitem 1</a></li>
      <li><a href="#">Subitem 2</a></li>
      <li><a href="#">Subitem 3</a></li>
    </ul>
    <li><a href="#">Item 4</a></li>
    <li><a href="#SubMenu2" data-toggle="collapse" data-parent="#MainMenu">Item 3</a></li>
    <ul class="collapse" id="SubMenu2">
      <li><a href="#">Subitem 1 <i class="fa fa-caret-down"></i></a></li>
      <li><a href="#">Subitem 2</a></li>
      <li><a href="#">Subitem 3</a></li>
    </ul>
  </ul>
</div>