JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
  <app></app>
</div>

SCSS

.container {
  padding-top: 10px;
}
#hoursInput {
  width: 200px;
}
.radio input[type='radio'] {
  margin-top: -16px;
}

JavaScript

Vue.component('app', {
  template: `
  	<div class="container">
    	<div class="form-group">
        <div>Current Day: {{ordinal(currentDay)}}</div>
        <div>Current Hour: {{currentHour12h}}</div>
        <div id="hoursInput" class="input-group">
        	<input type="number" class="form-control" v-model.number="addHoursModel" :max="24" />
        	<div class="input-group-btn">
        		<button type="button" class="btn btn-default" @click="addHours">Add Hours</button>
					</div>
				</div>
      </div>
      <div class="form-group">
      	<button type="button" class="btn btn-default" @click="importVisible = !importVisible">{{!importVisible? 'Show' : 'Hide'}} import</button>
      </div>
      <div class="form-group" v-show="importVisible">
      	<div>
      		<textarea class="form-control" v-model="importData"></textarea>
        </div>
        <button type="button" class="btn btn-default" @click="importRows">Import Data</button>
      </div>
      <div class="form-group">
      	<div class="radio">
      		<label>By Hour <input type="radio" v-model="listType" value="hour" /></label>
        </div>
				<div class="radio">
        	<label>By List <input type="radio" v-model="listType" value="edit" /></label>
        </div>
      </div>
      <div class="form-group" v-show="listType === 'edit'">
      	<div class="input-group">
          <input type="text" class="form-control" placeholder="Search By Item" v-model="searchTerm" />
          <div class="input-group-btn">
						<button type="button" class="btn btn-danger" @click="searchTerm = ''">
            	<span class="glyphicon glyphicon-remove"></span>
						</button>
          </div>
        </div>
      </div>
      <div class="form-group">
      	<div class="list-group">
        	<div class="list-group-item">
          	<div class="row">
            	<div class="col-md-1 text-center">Day</div>
              <div class="col-md-2 text-center">Hour</div>
              <div class="col-md-1...