JSFiddle - React, Tailwind, and code Playground

Fake Task Form Editor

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
<div id="sidr" class="sidr left" style="transition: left 0.2s ease 0s; left: 0px;">
	<form>

    <fieldset>
      <legend>If</legend>
      <div class="form-group">
        <label for="iftty-1" class="sr-only">field</label>
        <select id="iftty-1" class="form-control ui-yakabox-iftty-form-control">
          <option>-select-</option>
          <option selected>Status</option>
        </select>
      </div>
    </fieldset> 
    <fieldset>
      <legend>Is</legend>
      <div class="form-group">
        <label for="iftty-1" class="sr-only">field</label>
        <select id="iftty-1" class="form-control ui-yakabox-iftty-form-control">
          <option>-select-</option>
          <option>Status</option>
        </select>
      </div>
    </fieldset>
    <fieldset>
    
      <legend>Then</legend>

      <ul class="nav nav-tabs">
        <li>
          <a href="#aaa" data-toggle="tab">
            <span class="fa fa-envelope"></span>
            <span class="sr-only">Send E-mail</span>
          </a>
        </li>
        <li>
          <a href="#bbb" data-toggle="tab">
            <span class="fa fa-envelope"></span>
            <span class="sr-only">Assign Task</span>
          </a>
        </li>
        <li>
          <a href="#ccc" data-toggle="tab">
            <span class="fa fa-envelope"></span>
            <span class="sr-only">Update Field</span>
          </a>
        </li>
        <li>
          <a href="#ddd" data-toggle="tab">
    ...

SCSS

.sidr {
  box-shadow:none; 
  padding-top:20px;
  legend {
    
  }
}
legend {
  font-weight:bold;
  border:none;
  margin-bottom:0;
  margin-top:10px
}
.nav-tabs li {
  width:25%;
}
.form-control.ui-yakabox-iftty-form-control {
  background:none;
  border:none;
  box-shadow:none;
  font-size:20px;
  padding:0;
  -webkit-appearance: none; 
  appearance: none;
  margin-bottom:0;
}
.nav.nav-tabs {
  border:none;
}
.nav.nav-tabs li {
  border:none;
}
.nav.nav-tabs li a{
  span {
    padding:0;
  }
  padding:20px;
}

JavaScript

$(document).ready(function(){
  activaTab('aaa');
});

function activaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};