JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://guxstaging.pbi.global.pvt/design_system/styles/design_system.css">
<form class="form-inline text-right" ng-controller="pb.components.ContactSearchBar as csb" novalidate>
    <!--FIXME: Needs to be styled to match protospec-->
    <div class="form-group searchbar">
        <label for="csbQuery">Search</label>
        <!--FIXME: Needs to be wired into model-->
        
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <!-- FIXME: Could be any binding name, but this needs to be replaced with {{addressbook-dropdown.value}} Will need to be wired to the dropdown menu-->
              All <!--Placeholder, should be changed dyamically-->
              <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
              <!--FIXME: Should be a json list that's localized-->
              <li><a>All</a></li>
              <li><a>Last Name</a></li>
              <li><a>First Name</a></li>
              <li><a>Company</a></li>
              <li><a>Street</a></li>
              <li><a>City</a></li>
              <li><a>State</a></li>
              <li><a>Zip</a></li>
              <li><a>Country</a></li>
            </ul>
          </div>
          <input ng-model="searchParams.searchText"
                 ng-model-options="queryOptions"
                 pattern="..+"
                 type="search"
                 class="form-control address-search"
                 id="csbQuery">
        </div>
    </div>
    <div class="form-group">
        <label for="csbFilter">Sort by</label>
        <select ng-model="searchParams.sortField" class="form-control"...

CSS

#addPostageCardNumber {
  display: block;
  font-weight: bold;
}
.add-margin-btm {
  margin-bottom: 20px;
}
.form-group > label {
  font-size: 18px;
  font-weight: bold;
  width: 125px;
}
.form-group > select {
  width: 200px;
  display: inline-block;
}
.form-group > span {
  display: inline-block;
  line-height: 34px;
}
.submit-btn {
  margin-top: 30px;
}