JSFiddle - React, Tailwind, and code Playground

by Dale Hollocher

HTML

<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.css">
<form method="POST" action="http://localhost:8000/beers" accept-charset="UTF-8" dataa-abide="1" id="beer-create-form"><input name="_token" type="hidden" value="4AuiBBydwzxeOVZl78oDqrEu3sbb4X2qlUHe7bGB">
<div class="row">
	<div class="large-12 medium-12 columns">
		<div class="row">
			<div class="small-8 columns">
				<label for="name" title="Fill in the Name">Name:</label>
				<input class="pageRequired" name="name" type="text" value="" id="name">
			</div>
			<div class="small-4 columns">
				<label for="brewery">Brewery:</label>
				<select class="pageRequired" name="brewery_id"><option value="" selected="selected"></option><option value="57">10 Barrel</option><option value="58">Ninkasi</option><option value="59">Blue Moon</option><option value="60">Kona</option></select>
			</div>
		</div>
		<div class="row">
			<div class="small-3 columns">
				<label for="abv">ABV:</label>
				<input class="form-percent pageRequired" maxlength="5" name="abv" type="text" id="abv">
				<span class="percent left">%</span>
			</div>
			<div class="small-3 columns">
				<label for="ibu">IBU:</label>
				<input name="ibu" type="text" id="ibu">
			</div>
			<div class="small-6 columns">
				<label for="style">Style:</label>
				<select class="pageRequired" name="style_id"><option value="" selected="selected"></option><option value="113">Lager</option><option value="114">Ale</option><option value="115">IPA</option><option value="116">Cider</option><option value="117">Bitter</option><option value="118">Pilsner</option><option value="119">Wheat</option><option value="120">Stout</option></select>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="large-12 medium-12 columns">
		<div class="row">
			<div class="large-12 columns">
				<label...

CSS

body{
  font-family: arial !important;
}

.row{max-width: 1500px;}

.hidden{
  display: none;
}

.disabled {
  background-color: #cccccc !important;
}

div.row div.dimmed {
  position: relative;
}

.flash{
  display:none;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 100;
  border-radius: 2px;
  margin-bottom: 0px;
}

div.row div.dimmed:after {
  content: " ";
  z-index: 5;
  display: block;
  position: absolute;
  height: 100%;
  bottom: 7px;
  left: 0;
  right: 0;
  background: rgba(153, 153, 153, 0.5);
}

body div.row{background-color: #fff;}

h1{color: #ed1c24; font-weight: bold;}
h2, h3, h4, h5, h6, p, li{color: #888;}

img{font-size: 10px; color: #ed1c24; margin: 10px 0;}

ul.inline-list{
	list-style-type: none; text-align: center
}
ul.inline-list li{
	display: inline-block
}

input[type="file"],
input[type="checkbox"],
input[type="radio"],
select {
  margin:0; }

/* ----------------------------- Flash Messages -------------------------------------- */

  div.success{
  	background-color: #5CAD5C;
  }

/* ----------------------------- Brewery Index -------------------------------------- */


  img.thumb {
  	width: 50px;
  	height: 50px;
  }

  img.thumb-large {
  	width: 100px;
  	height: 100px;
  }


/* ----------------------------- Admin Homepage -------------------------------------- */

  img.homepage-asset{
  	width: 50%;
  	height: 50%;
  }


/* ----------------------------- Tables ---------------------------------------------- */

  table {
  	border-collapse: collapse;
  	width: 100%;
    background: #FFFFFF;
    margin-bottom: 1.25rem;
    border: 1px solid #e2e2e2;
    table-layout: auto; }
    table caption {
      background: transparent;
      color: #222222;
      font-size: 1rem;
      font-weight: bold; }
    table thead {
      background: #F5F5F5; }
      table thead tr th,
      table thead tr td {
        padding: 0.5rem 0.625rem 0.625rem;
        font-size: 0.875rem;
        font-weight: bold;
        color: #222222;...

JavaScript

$(document).ready(function(){
	var current_page = 0
	var valid_distributions = 0

	$('#distributor-select').on('change', function() {
		updateBeerPanel($(this));
	});

	$(document).on('click', '.kegsize-toggle', function(e){
		revealKegsize($(this));
	});

	$(document).on('click', '.remove-distributor', function(e){
		e.preventDefault();
		removeDistributorInfo($(this));
	});

		$(document).on('click', '.toggle-distributor', function(e){
		e.preventDefault();
		toggleDistributorInfo($(this));
	});

	$.validator.addMethod("pageRequired", function(value, element) {
		console.log(current_page);
		function onBeerPanel() {
				return $(element).parents(".pending-beer-distribution").length;
			}
		if (valid_distributions > 0) {
			$('#distributor-select').prop('required', false)
		}
		if (current_page == 1) {
			console.log('top is optional');
			return this.optional(element);
		}else if (current_page == 2) {
			return !this.optional(element);
		} else {
		return "dependency-mismatch";
		}
	}, $.validator.messages.required)

	var v = $("#beer-create-form").validate({
		debug: true,
		rules: {
				'keg_sizes[]': {
						required: true
				}
		},
		messages: {
			'keg_sizes[]': 'Choose at least one keg size'
		},

		errorClass: "error",
		errorPlacement: function (error, element) {
			if (element.hasClass('kegsize-toggle')){
				error.insertAfter(element.parents().find('.distributor-name'));
			}else if (element.hasClass('price')) {
				console.log('price');
			}
		},
		highlight: function(element, errorClass) {
			$(element).addClass(errorClass);
		},
		unhighlight: function(element, errorClass) {
			$(element).removeClass(errorClass);
		}
	});

	$(document).on('click', '.save-listing', function(e) {
		current_page = 1;
		if (v.form()) {
			saveBeerPanel();
			wipeBeerPanel();
			valid_distributions += 1
		}
		e.preventDefault();
	});

	$(document).on('click', '#add-beer-button', function(e) {
		current_page = 2
	});

	function removeDistributorInfo(e){
		var panel =...