JSFiddle - React, Tailwind, and code Playground

Data Directory Settings - v2

by Hugo Carneiro

HTML

<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://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css">
<div class="widget-holder">

  <header>
    <p>Configure your Data Directory</p>
    <a href="#">Need help?</a>
  </header>

  <div class="title-header">
    <p>Select data source</p>
    <p>Select a data source for your directory.</p>
  </div>

  <div class="form-group">
    <div class="col-sm-4 control-label">
      <label for="data-sources">Which table do you want to use for your directory?</label>
    </div>
    <div class="col-sm-8">
      <label for="data-sources" class="select-proxy-display">
        <span class="icon fa fa-chevron-down"></span>
        <span class="select-value-proxy"></span>
        <select id="data-sources" data-label="select" class="hidden-select form-control"></select>
      </label>
    </div>
  </div>

  <div class="title-header">
    <p>Browse options</p>
    <p>Your data will be displayed in a list. You can set up how it's displayed and configure how users can search/filter your data.</p>
  </div>

  <div class="form-group">
    <div class="col-sm-4 control-label">
      <label for="directory-browse-label">How do you want your data displayed in the main list?</label>
    </div>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="directory-browse-label" placeholder="Enter field names">
      <p class="help-block">Use <code>{{*}}</code> to wrap around a field name, e.g. <code>{{Name}}, {{Company}}</code>.</p>
    </div>
  </div>
  
  <!-- NEW IMAGE OPTION -->
  <div class="form-group">
    <div class="col-sm-4 control-label">
      <label...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #f2f6f7;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-danger {
  color: #FFF;
  background-color: #d9534f;
  border-bottom: 2px solid #c9302c;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover,
.btn-danger:active:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}

.btn-link,
a {
  color: #00abd1;
}

.widget-holder {
  padding: 15px;
}

header {
  display: flex;
  font-size: 0.8em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 3rem;
  padding-bottom: 1.5em;
}

.title-header {
  font-size: 1.0em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  padding-bottom: 1em;
}

header.titles {
  font-weight: bold;
}

header p {
  flex: 1;
  margin: 0 1.4rem 0 0;
}

.title-header p {
  margin: 0 1.4rem 0 0;
  font-weight: bold;
}

.title-header p + p {
  font-weight: normal;
}

header a {
  text-decoration: none;
}


/* FORMS */

.form-group {
  margin-left: -15px;
  margin-right: -15px;
}

label {
  font-weight: normal;
  color: #14505e;
}

.form-control {
  border-radius: 6px;
  border: 1px solid #e4e9eb;
  color:...

JavaScript

$('#show_subtitle').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-subtitle').fadeIn();
  } else {
    $('.show-subtitle').hide();
  }
});

$('#show_tags').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-tags').fadeIn();
  } else {
    $('.show-tags').hide();
  }
});

$('#show_image').on('change', function() {
  if ($(this).is(":checked")) {
    $('.show-image-thumb').fadeIn();
  } else {
    $('.show-image-thumb').hide();
  }
});