JSFiddle - React, Tailwind, and code Playground
by Girisha Chennura
HTML
<link rel="stylesheet" href="http://ea61ce-test.knolseed.com/assets/tinymce/skins/lightgray/skin.min.css">
<link rel="stylesheet" href="http://ea61ce-test.knolseed.com/assets/application.css">
<div class="smart-list-applied-filter badge">
<div class="row-fluid">
<div class="span11">
<div class="row-fluid">
<div class="span7">
<div class="applied-filter-text text-center ng-binding">
visits <
</div>
</div>
<div class="span5">
<div class="applied-filter-input pull-left">
<div class="filter-value" filter-data-type="3">
<input name="numberInput" ng-model="appliedFilter.value" type="number" class="ng-pristine ng-valid ng-valid-number">
</div>
</div>
</div>
</div>
<div class="row-fluid"></div>
<div class="profile-filter text-center">
<div class="span1">
<div class="profile-filter-text">
in
</div>
</div>
<div class="span5">
<div class="applied-filter-input">
<div>
<input ng-model="selectedValue" placeholder="Enter category" type="text" typeahead-on-select="setCategoryValue()" typeahead="category as category.name for category in getCategories($viewValue)" class="ng-pristine ng-valid">
<ul class="typeahead dropdown-menu ng-isolate-scope" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}" typeahead-popup="" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position" style="display: none;">
<!-- ngRepeat: match in matches -->
</ul>
</div>
</div>
</div>
<div class="span1">
<div class="profile-filter-text">
in
</div>
</div>
<div class="span5">
<div class="applied-filter-input">
<select...
SCSS
.smart-list-applied-filter {
padding: 15px 5px 10px 5px;
}
.smart-list-close-button {
padding: 0;
}
.applied-filter-text, .profile-filter-text, .applied-filter-input {
margin: 0;
line-height: 25px;
}