JSFiddle - React, Tailwind, and code Playground

by gadurp1

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script type="text/javascript" src="https://cdn.rawgit.com/vaakash/jquery-conditioner/master/jquery.conditioner.js"></script>

<select class="boxOrientation" id="box[]">
    <option value="vl-left">Vertical - Left</option>
    <option value="vl-right">Vertical - Right</option>
    <option value="hl-top">Horizontal - Top</option>
    <option value="hl-bottom">Horizontal - Bottom</option>
</select><br/>

<!-- Here we are looking for a pattern "hl" in the input's value -->
<div class="horizontalOptions"
data-condr-value="hl"
data-condr-input="#box[]"
data-condr-action="pattern?slideDown:fadeOut"
data-condr-events="change">
    Here are some options for horizontal box.
</div>


<select class="boxOrientation" id="box[]">
    <option value="vl-left">Vertical - Left</option>
    <option value="vl-right">Vertical - Right</option>
    <option value="hl-top">Horizontal - Top</option>
    <option value="hl-bottom">Horizontal - Bottom</option>
</select><br/>

<!-- Here we are looking for a pattern "hl" in the input's value -->
<div class="horizontalOptions"
data-condr-value="hl"
data-condr-input="#box[]"
data-condr-action="pattern?slideDown:fadeOut"
data-condr-events="change">
    Here are some options for horizontal box.
</div>


<script>
$(document).ready(function(){
    $( '.horizontalOptions' ).conditioner();
});
</script>