JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="search__filter">
    Filter by Search:
    <input type="text" class="form-control" data-bind="textInput: searchTerm">
  </div>

  <div class="form-inline search__options">
    Filter Options:
    <div class="form-group">
      <div class="checkbox">
        <label>
          <input type="checkbox" data-bind="checked: searchByTitle"> Title
        </label>
      </div>
    </div>
    <div class="form-group">
      <div class="checkbox">
        <label>
          <input type="checkbox" data-bind="checked: searchByDesc"> Description
        </label>
      </div>
    </div>
  </div>
  <div class="search__tags">
    Filter by Tags:
    <div class="tagFilter">
      <input type="text" class="form-control">
    </div>
  </div>

  <div class="container" data-bind="foreach: appRows">
    <div class="row-fluid" data-bind="foreach: $data">
      <div class="col-md-3">
        <h1 data-bind="text: title"></h1>
        <p data-bind="text: description"></p>
      </div>
    </div>
  </div>

CSS

.search__filter,
.search__options,
.search__tags {
  margin-top: 2em;
  border: 1px solid #000;
  padding: 1em;
}

JavaScript

var data = [{
  title: "Billy",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  tags: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}, {
  title: "Bob",
  description: "Donec ultricies eget libero sed pellentesque.",
  tags: [2, 4]
}, {
  title: "Ben",
  description: "Morbi tempor ut orci sit amet consequat.",
  tags: [1, 3, 10]
}, {
  title: "Buford",
  description: "Praesent dictum sapien ut quam fringilla malesuada.",
  tags: [1, 2, 3, 9]
}, {
  title: "Bates",
  description: "Fusce a erat laoreet est efficitur egestas ac ac tortor.",
  tags: null
}, {
  title: "Joe",
  description: "Mauris suscipit, nunc sed ullamcorper luctus, velit purus dignissim tortor, et pretium massa ligula elementum sapien.",
  tags: [1, 4]
}, {
  title: "Joe",
  description: "Integer dignissim augue et finibus tristique.",
  tags: [1, 2]
}, {
  title: "Joe",
  description: "Quisque fringilla dignissim sem, sit amet volutpat tellus vulputate quis.",
  tags: [1, 3]
}, {
  title: "Joe",
  description: "Interdum et malesuada fames ac ante ipsum primis in faucibus.",
  tags: [2, 3]
}, {
  title: "Joe",
  description: "Cras lorem turpis, dapibus at metus ac, vulputate vestibulum sapien.",
  tags: [3, 4]
}, {
  title: "Joe",
  description: "Nulla pellentesque consequat turpis, faucibus auctor arcu dictum a. ",
  tags: null
}, {
  title: "Joe",
  description: "Cras malesuada libero non molestie viverra.",
  tags: null
}, {
  title: "Joe",
  description: "Aliquam non elit in orci vulputate facilisis in at nibh.",
  tags: null
}];

function ViewModel() {
  var _this = this;

  _this.searchTerm = ko.observable('');
  _this.searchByTitle = ko.observable(false);
  _this.searchByDesc = ko.observable(false);
  _this.arrayOfData = ko.observableArray(data);
  _this.SelectedTags = ko.observableArray([]);

  _this.filteredApps = ko.computed(function() {
    var apps = _this.arrayOfData(),
      search = _this.searchTerm(),
      filterTags = _this.SelectedTags();

    if ((search.length...