JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="http://www.getty.edu/global/r/css/helpers.css">
<div class="row">
  <div class="small-12 large-4 columns" data-name='materials'>
    <!-- <button aria-expanded="true" aria-haspopup="true" class="btn btn-default btn-sm" data-toggle="dropdown" v-on:click="toggleHide('dropdown3')" ref="dropdown3" id="dropdown3" type="button">Building Type <span class="caret"></span></button> -->
    <div>
      <ul>
        <li>
          <label for="box16" class="radio-btn">
                                        <input v-model="attributes.buildings"  id="box16" name="box16" type="checkbox" @change="handleChange('box16')" value="ctr">
                                        <span ref="box16">Cultural</span>
                                    </label>
        </li>
        <li>
          <label for="box15" class="radio-btn">
                                        <input v-model="attributes.buildings"  id="box15" name="box15" type="checkbox" @change="handleChange('box15')" value="ens">
                                        <span ref="box15">Scientific &amp; Educational</span></label>
        </li>
        <li>
          <label for="box14" class="radio-btn">
                                        <input v-model="attributes.buildings"  id="box14" name="box14" type="checkbox" @change="handleChange('box14')" value="gvb">
                                        <span ref="box14">Government</span></label>
        </li>
        <li>
          <label for="box13" class="radio-btn">
                                        <input v-model="attributes.buildings" id="box13" name="box13" type="checkbox" @change="handleChange('box13')" value="rlg">
                                        <span ref="box13">Religious</span></label>
        </li>
        <li>
          <label for="box12" class="radio-btn">
                                        <input v-model="attributes.buildings" id="box12" name="box12" type="checkbox" @change="handleChange('box12')" value="rsd">
 ...