JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Yakabox</a>
        </div>
          
        <div class="col-sm-4 col-md-4">
  <form role="search" class="navbar-form">
    <div class="input-group">
      <input type="text" name="q" placeholder="Search" class="form-control"/>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default
                     dropdown-toggle" data-toggle="dropdown" tabindex="-1" style="border-radius:0 !important; border-width:1px 0 1px 0"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>      

        <ul class="dropdown-menu pull-right">
      <li class="ui-widget-content ui-border-none"> <a name="" style="background-image:url(/images/icon_all.png);" class="ui-yakabox-icon-link">All Files</a> </li>
                  <li class="ui-widget-content ui-border-none"> <a style="background-image:url(https://yakabod.yakabox.com/images/icon_document.png);" name="Lib" class="ui-yakabox-icon-link">Documents</a> </li>
                        <li class="ui-widget-content ui-border-none"> <a style="background-image:url(https://yakabod.yakabox.com/images/icon_document_link.png);" name="Link"...

CSS

.dropdown-menu>li>a.ui-yakabox-icon-link {
    background-repeat:no-repeat;
    background-position: 2px center;
    padding: 8px 8px 8px 30px;
}