JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Category
		<span class="caret"/>
	</button>
	<ul class="dropdown-menu" aria-labelledBy="dropdownMenu1">
		<li class="dropdown-submenu">
        <a href="/lifestyle/category/arts">Arts</a>
        <ul class="dropdown-menu">
    <li >
        <a href="/lifestyle/category/artist-profiles">Artist Profiles</a>
   </li>
       </ul>
  </li>
   <li >
        <a href="/lifestyle/category/buzz-quiz">Buzz Quiz</a>
    </li>
   <li >
        <a href="/lifestyle/category/coast">Coast</a>
   </li>
   <li class="dropdown-submenu">
        <a href="/lifestyle/category/crime-security">Crime/Security</a>
       <ul class="dropdown-menu">
   <li >
        <a href="/lifestyle/category/rape-resources">Rape Resources</a>
   </li>
    <li >
        <a href="/lifestyle/category/security-overview">Security Overview</a>
  </li>
       </ul>
 </li>
   <li >
        <a href="/lifestyle/category/environment">Environment</a>
   </li>
   <li class="dropdown-submenu">
        <a href="/lifestyle/category/fashion">Fashion</a>
     <ul class="dropdown-menu">
   <li >
        <a href="/lifestyle/category/about-fafa">About FAFA</a>
   </li>
   <li >
      <a href="/lifestyle/category/designers">Designers</a>
   </li>
        </ul>
  </li>
	</ul>
</div>

CSS

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";