JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<link rel="stylesheet" href="boostrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<div class="container-fluid">
<div class="row">
  <div class="col-md-3">
    <div class="ui-yakabox-conditionalformat-panel" style="padding:20px; border-right:1px solid gray;">
 
    <div>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="single">
        
          <div class="form-group">
            <label>Conditional Formatting: Select</label>
            <div class="btn-group pull-right">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Themes <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#">premade</a></li>
                <li><a href="#">premade</a></li>
                <li><a href="#">premade</a></li>
              </ul>
            </div>
            
          <div>
          <div class="form-control-value ui-yakabox-formatting-style-wrapper">
            

          </div>
        </div>
      </div>

            
            <hr/>
            
   
            <ul class="list-group">
              <li class="list-group-item">
                <div class="btn-group btn-group-block pull-right" role="group" aria-label="...">
                  <button type="button" class="btn btn-link btn-xs" data-toggle="tooltip" data-placement="top" title="Text">
                    Edit
                    <span class="fa fa-sort-down"></span>
                  </button>
                </div>Added
              </li>
              <li...

SCSS

.ui-yakabox-conditionalformat-panel {
  .tab-pane {
    padding:15px 0;
    .form-control {
      margin-bottom:5px;
    }
  }
}

.text-error { }
.text-warning { }
.text-danger { }

.bg-error { }
.bg-warning { }
.bg-danger { }

.ui-yakabox-formatting-style-wrapper {
  .btn-group:first-child {
    .btn:first-child {
      text-align:left;
      border-radius:5px;
      margin-bottom:5px;
      .caret {
        float:right;
        margin-top:-11px;
      } 
    }
    .dropdown-menu {
      .btn {
        text-align:center;
        border-radius:0px;
      }
      p {
        margin-top:5px;
      }
      .btn-light {
        &:hover {
          border-color:#adadad;
        }
        background:#fff;
        border-color: #ccc;
      }
      .btn-default {
        background:#f5f5f5;
      }
      .btn-danger {
        background-color:#f2dede;
        color:#ac2925;
      }
      .btn-warning {
        background-color:#fcf8e3;
        color:#d58512;
      }
      .btn-success {
        background-color:#dff0d8;
        color:#398439;
      }
      .btn-info {
        background-color:#d9edf7;
        color:#269abc;
      }
    }
  }
}

.panel-body {
  padding:0;
}

JavaScript

$('.nav-tabs a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
  $('#single, #scale').toggle();
});

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})