JSFiddle - React, Tailwind, and code Playground

by Camille Bechayda

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="pure-min.css">
<link rel="stylesheet" href="chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<!----->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <input id="id_radio1" type="radio" name="name_radio" value="value_radio1" checked="checked" />
            <label class="control-label text-danger">Steam</label>
            
            <input id="id_radio2" type="radio" name="name_radio" value="value_radio2" /><label class="control-label text-danger">Water</label>
            <input id="id_radio3" type="radio" name="name_radio" value="value_radio3" /><label class="control-label text-danger">Isotopes</label>
        </div>
    </div>
    <div class="row" id="divs">
        <div class="col-lg-4">
            <div class="form-group">
                <!--<label for="ddLSC1" class="col-md-2 control-label text-info">Steam</label>-->
                <div class="col-md-10">

                    <div class="dropdown-container-lsc1" id="div1">
                        <div class="dropdown-button noselect" id="dropdown-button-lsc1">

                            <div class="dropdown-quantity">

                                <span class="quantity" id="quantity-lsc1">Select Steam</span>
                            </div>
                            <i class="fa fa-unsorted"></i>
                        </div>
                       ...

CSS

.dropdown-container {
  width: 350px;
  font-family: sans-serif;
  font-size: 14px;
}

.instructions {
  width: 350px;
  font-family: sans-serif;
  font-size: 14px;
}

.instructions {
  width: 100%;
  text-align: center;
}

.dropdown-button {
  background: whitesmoke;
  padding: 10px 12px;
  border: 1px solid lightgray;
  border-image: none;
  width: 100%;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
}

.dropdown-label {
  float: left;
}

.dropdown-quantity {
  float: left;
}

.dropdown-quantity {
  margin-left: 4px;
}

.fa-filter {
  float: right;
}

.fa-unsorted {
  float: right;
}

.dropdown-list {
  border-width: medium 1px 1px;
  border-style: none solid solid;
  border-color: currentColor lightgray lightgray;
  padding: 10px 12px;
  border-image: none;
  width: 100%;
  float: left;
  box-sizing: border-box;
}

input[type='search'] {
  padding: 5px 0px;
}

.dropdown-search {
  width: 200px;
}

.ulBulletin {
  margin: 10px 0px;
  list-style-type: none;
  -ms-overflow-y: auto;
  max-height: 200px;
  -webkit-padding-start: 12px;
}

input[type='checkbox'] {
  top: 2px;
  position: relative;
}

.templatelabel {
  padding-left: 5px;
}

.searchbox {
  background: whitesmoke;
  margin: auto;
  padding: 10px 12px;
  border: 1px solid lightgray;
  border-image: none;
  height: auto;
  box-sizing: border-box;
}

.dropdown-check {
  padding-top: 5px;
}

JavaScript

function displayVals() {
      
            var multipleValues = $('[type="checkbox"].cbxwater:checked').attr('namedesc') || []
            return multipleValues.join(", ");
        }

        $(function () {
            var $divs = $('#divs > div');
            $divs.hide();
            $divs.first().show()
            $('input[type=radio]').on('change', function () {
                $divs.hide();
                $divs.eq($('input[type=radio]').index(this)).show();
            });
        });

        $(document).ready(function () {


            $('#edit').click(function () {
                alert("edit")
                $('.click2edit').summernote({ focus: true });
            });

            $('#save').click(function () {

                $('.click2edit').summernote('destroy');
            });

            //var edit = function () {
            //    alert("edit")
            //    $('.click2edit').summernote({ focus: true });
            //};
            //var save = function () {
            //    $('.click2edit').summernote('destroy');
            //};



            $('.dropdown-container-isotopes')
                .on('click', '#dropdown-button-isotopes', function () {
                    $('#dropdown-list-isotopes').toggle();
                })
                .on('input', '#dropdown-search-isotopes', function () {
                    var target = $(this);
                    var search = target.val().toLowerCase();

                    if (!search) {
                        $('.liisotopes').show();
                        return false;
                    }

                    $('.liisotopes').each(function () {
                        var text = $(this).text().toLowerCase();
                        var match = text.indexOf(search) > -1;
                        $(this).toggle(match);
                    });
                })
                .on('change', '[type="checkbox"]', function () {

                    //var numChecked =...