JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="popupContent">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Tile Settings</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="col-md-6">
                        <div class="tile menu-item-110" id="tilePreviewDiv">
                            <div class="general-wrapper-mm glyphicon general-icon-mm"><span class="glyphicon-folder-open"></span>
                            </div>
                            <div class="task-txt-mm"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                    <label class="col-md-4 control-label">Size</label>
                    <div class="col-md-8">
                        <select class="form-control" id="selectSize">
                            <option value="Single">Single</option>
                            <option value="Double">Double</option>
                        </select>
                    </div>
                </div>
                  <div class="form-group">
                    <label class="col-md-4 control-label">Title</label>
                    <div class="col-md-8">
                        <input type="text" class="input-md form-control" placeholder="Title" id="tileTitle">
                    </div>
                </div>
                <div class="form-group">
                <label class="col-md-4 control-label">Colour</label>
                    <div class="col-md-8">
                        <input type="color" class="form-control" placeholder="Colour" id="selectColour" list="colors">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label">Icon</label>
                    <div class="col-md-8">
                     ...

CSS

html, body {
    height: 100%;
}
.widget {
    border: 1px solid #e5e8e9;
    padding:10px;
    margin:15px;
    text-align:center;
    color: #cec6c6;
}
.top10 {
    height:10px;
    width:100%
}
.menu-item-110 {
    width: 110px;
    height: 110px;
    border: 1px solid #ffffff;
    text-align: center;
    vertical-align: middle;
}
.menu-item-232 {
    width: 232px;
    height: 110px;
    border: 1px solid #ffffff;
    text-align: center;
    vertical-align: middle;
}
.general-wrapper-mm span {
    margin-top: 10px;
}
.general-icon-mm {
    font-size: 48px;
    margin-top: 20px;
    color: #fff;
}
.task-txt-mm {
    color: #fff;
    margin-top: 13px;
    margin-left: 5px;
    text-align: left;
    font-size: 14px;
}
.modal-body {
    overflow-y: auto;
    height: 100%;
}
.modal-body .col-md-6, .modal-body .col-sm-6 {
    padding-right: 0px;
    padding-left: 0px;
}
.modal-body .col-md-6:first-child {
    background-color: rgba(237, 237, 237, 0.5);
    padding-bottom: 20px;
    border: 2px dashed grey;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
input, select {
    margin-bottom: 5px;
}
.tile{
  background-color: rgb(245, 169, 10);
  margin: 0 auto;
  margin-top: 15px;
}

JavaScript

$(function () {
    $('.tileColor').colorpicker();
});

$('#selectbasic').change(function () {
    //alert($("#selectbasic option:selected").text());
    if ($("#selectbasic option:selected").text() == 'Double') {
        $('.tile').removeClass('menu-item-110').addClass('menu-item-232');
    } else {
        $('.tile').removeClass('menu-item-232').addClass('menu-item-110');
    }
});

$('#tileTitle').keyup(function () {
    //alert($('#tileTitle').val())
    $('.task-txt-mm').html($('#tileTitle').val());
});

$("#colorpicker").on("change", function () {
    $(".tile").css("background-color", $("#colorpicker").val());
});

$("#iconSelect").on("change", function () {
    $(".general-icon-mm span").removeClass().addClass($("#iconSelect").val())
});