JSFiddle - React, Tailwind, and code Playground

by Jonny

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div id="topbar" class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand">A Website</a>
      <ul class="nav pull-right">
        <li>
          <a href="#" class="caret-before">
                    someuser
                </a>
        </li>
        <li class="dropdown">    
            <a class="dropdown-toggle caret-after" data-toggle="dropdown">
                <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a tabindex="-1" href="#">Action</a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">Another action</a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">Something else here</a>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <a tabindex="-1" href="#">Separated link</a>
                    </li>
                </ul>
                </li>
      </ul>
    </div>
  </div>
</div>

<div id="botbar" class="navbar navbar-fixed-bottom navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand">A Website</a>
      <ul class="nav pull-right">
        <li>
            <div class="btn-group">
              <button class="btn" href="#">User</button>
              <button href="#" data-toggle="dropdown" class="btn dropdown-toggle">
                <b class="caret"></b>
              </button>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                    <a...

CSS

/* ignore this, I just added it so the caret wouldn't appear behind jsfiddle's "Result" button */
body {
    padding-top:20px;
}

a.caret-before {
    padding-right:1px !important;
}
a.caret-after {
    padding-left:1px !important;
}