JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<ul class="unstyled">
    <li class="dropdown">
      <a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">User 1<b class="caret"></b></a>
      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
        <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">User 1</a>
          <ul class="dropdown-menu">
            <li>
              <div class="custom">
                <h1 style="color: #333;">Role 1</h1>
                <h1 style="color: #333;">Role 2</h1>
                
              </div>
            </li>
          </ul>
        </li>
 <li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">User 2</a>
          <ul class="dropdown-menu">
            <li>
              <div class="custom">
                <h1 style="color: #333;">Role 3</h1>
                <h1 style="color: #333;">Role 4</h1>
                
              </div>
            </li>
          </ul>
        </li>
      </ul>
   </li>
     
</ul>

CSS

body {padding: 10px;}
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}