JSFiddle - React, Tailwind, and code Playground

by Jeremy McBride

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Dropdown Link</a></li>
    <li>
        <form>
            <button class="btn btn-link">Dropdown Button</a>
        </form>
    </li>
  </ul>
</div>

CSS

.dropdown-menu form button {
    border:0;
    padding: 3px 20px;
    color: #333;
    width:100%;
    text-align:left;
}
.dropdown-menu form button:hover {
    color:white;
    text-decoration:none;
    background-color:#0000cc;
}