JSFiddle - React, Tailwind, and code Playground

by ritcheyer

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script>
    
    angular.module('app', [])
    .controller ('MainCtrl', function ($scope){
        
        $scope.activeStatuses = ['active-1', 'active-2', 'active-3', 'active 4', 'active 5'];
        $scope.inActiveStatuses = ['inactive-1', 'inactive-2', 'inactive-3', 'inactive 4', 'inactive 5'];
    
    
    
    });
</script>
<div ng-app="app">
  <ol class="action-container" ng-controller="MainCtrl">
    
    <li class="action">
      <a href="#" class="btn btn-default" ng-click="showDropdown">Status <i class="caret"></i></a>
      <ol class="dropdown" ng-show="">
        <li class="primary-section status">
          <label for="active-state" class="action-heading">
              <input type="checkbox" id="active-state" /> Active
          </label>
          <ul class="for-active-states">
            <li class="status" ng-repeat="activeStatus in activeStatuses">
              <label>
                  <input type="checkbox" /> {{activeStatus}}
              </label>
                <span class="status-number">12</span>
            </li>
          </ul>
        </li>


        <li class="primary-section status">
          <label for="active-state" class="action-heading">
              <input type="checkbox" id="active-state" /> Inactive
          </label>
          <ul class="for-active-states">
            <li class="status" ng-repeat="inactiveStatus in inActiveStatuses">
              <label>
                  <input type="checkbox" /> {{inactiveStatus}}
              </label>
                <span class="status-number">12</span>
            </li>
          </ul>
        </li>
      </ol>
    </li>
  </ol>
  
</div>

CSS

ol,ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.action-container {
    font-size: 1.2rem;
}
.caret {
    position: relative;
    top: -2px;
}
.dropdown {
    width: 200px;
    border: 1px solid #333;
    background-color: #fefefe;
    border-radius: 5px;
    box-shadow: 4px 4px 3px #efefef;
}
.action {
    display: inline-block;
}
.action label {
    font-weight: normal;
}
.action-heading {
    border-bottom: 1px dashed #ddd;
    text-transform: uppercase;
    color: #ddd;
    width: 100%;
    padding: 10px 0;
}
.for-active-states {
    clear: both;
}
.status {
    overflow: hidden;
    padding:  0 5px;
}
.status .status {
    padding-left: 0;
}
.status label {
    float: left;
}
.status-number {
    float: right;
    font-size: 10px;
}