JSFiddle - React, Tailwind, and code Playground

by shubhampokhriyal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<div class="container">

  <div class="jumbotron">
<!--     <div>
      <div class="form-group">
        <input type="text" class="form-control input-sm" id="pref-search">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter">
          <i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter
        </button>
      </div>
    </div> -->
<div class="mr15 mt20">
            <h3 class="ui header">Language combination</h3>
            <table class="ui celled table">
              <thead>
                <tr>
                  <th>Source language</th>
                  <th>Target language</th>
                  <th>Job type</th>
                  <th>Rate</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td>
                    <select class="ui search dropdown">
                      <option value="">State</option>
                      <option value="1">1</option>
											<option value="2">2</option>
											<option value="3">3</option>
											<option value="4">4</option>
											<option value="5">5</option>
                    </select>
                  </td>
                  <td>
                    <select class="ui search dropdown">
                      <option value="">State</option>
                      <option value="1">1</option>
											<option value="2">2</option>
											<option value="3">3</option>
											<option value="4">4</option>
											<option...

CSS

.container {
  margin: 10px
}

JavaScript

var data = {
  'filters': [],
}

// app Vue instance
var app = new Vue({
  // app initial state
  data: {
    extFilters: data,
  },

  // methods that implement data logic.
  methods: {
    addFilter: function() {
      this.extFilters.filters.push({

        text: '',
				text2: '',
      })
    },

    removeFilter: function(filter) {
      var index = this.extFilters.filters.indexOf(filter);
      this.extFilters.filters.splice(index, 1);
    },
  },
})

// mount
app.$mount('.jumbotron')