JSFiddle - React, Tailwind, and code Playground

Portal Settings UI

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.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/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="widget-holder">

  <header>
    <p>Configure your app list</p>
    <a href="#">Need help?</a>
  </header>

  <div class="form">

    <div class="form-group">
      <div class="col-sm-12 control-label">
        <label>Select the apps you want available to the user</label>
      </div>
      <div class="col-sm-12 apps-container">
        <div class="col-xs-4 app-holder" data-app-id="405">
          <input type="checkbox" id="app_id_405" name="app_id_405">
          <label for="app_id_405">
            <div class="app-icon" style="background-image: url('http://i.imgur.com/05UtWZn.png');">
              <div class="app-screen">
                <i class="fa fa-check"></i>
              </div>
            </div>
            <div class="app-name">
              <p>Aenean Cras Dapibus</p>
            </div>
          </label>
        </div>
        <div class="col-xs-4 app-holder" data-app-id="406">
          <input type="checkbox" id="app_id_406" name="app_id_406">
          <label for="app_id_406">
            <div class="app-icon" style="background-image: url('http://i.imgur.com/05UtWZn.png');">
              <div class="app-screen">
                <i class="fa fa-check"></i>
              </div>
            </div>
            <div class="app-name">
              <p>Aenean Cras Dapibus</p>
            </div>
          </label>
        </div>
        <div class="col-xs-4 app-holder" data-app-id="407">
          <input type="checkbox" id="app_id_407" name="app_id_407">
          <label for="app_id_407">
            <div class="app-icon" style="background-image: url('http://i.imgur.com/05UtWZn.png');">
              <div class="app-screen">
                <i...

CSS

/* DO NOT USE THIS */

@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;
}


/* END OF DO NOT USE THIS */

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

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

.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default:focus,
.btn-default: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:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary:focus,
.btn-primary: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:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger:focus,
.btn-danger: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;
}

.controls {
  text-align: center;
}


/* FORMS */

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

label {
  font-weight: normal;
  color:...

JavaScript

// ATTACH EVENT LISTENERS
$('#select_security').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);

  if (selectedValue === "access-list") {
    $('#data-source-fields').addClass('show');

    if ($('#regex-field').hasClass('show')) {
      $('#regex-field').removeClass('show');
    }
  } else if (selectedValue === "access-list-app-control") {
    $('#data-source-fields, #regex-field').addClass('show');
  } else if (selectedValue === "no-security") {
    if ($('#regex-field').hasClass('show')) {
      $('#regex-field').removeClass('show');
    }
    if ($('#data-source-fields').hasClass('show')) {
      $('#data-source-fields').removeClass('show');
    }
  }
});

$('#select_datasource').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);

  if (selectedValue !== "") {
    $('#select-email-field').removeClass('hidden');
  } else {
    if (!$('#select-email-field').hasClass('hidden')) {
      $('#select-email-field').addClass('hidden');
    }
  }
});

$('#select_email').on('change', function() {
  var selectedValue = $(this).val();
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
});