JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="widget" data-toggle="modal" data-target="#basicModal">Pin to Tiles</div>
<!-- MODAL -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title" id="myModalLabel"><strong>Tile Generator</strong></h4>

            </div>
            <div class="modal-body">
                <div class="col-sm-6">
                    <div class="tile menu-item-110" style="background-color: rgb(245, 169, 10); margin: 0 auto;margin-top: 15px;">
                        <div class="general-wrapper-mm glyphicon general-icon-mm"> <span class="glyphicon-folder-open"></span>

                            <!--<div class="alert-count-mm">10</div>--></div>
                        <div class="task-txt-mm">Title Here</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="selectbasic">Size</label>
                        <div class="col-md-8">
                            <select id="selectbasic" name="selectbasic" class="form-control">
                                <option value="1">Single</option>
                                <option value="2">Double</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="tileTitle">Title</label>
                        <div class="col-md-8">
                            <input id="tileTitle" name="tileTitle" type="text" placeholder="Tile Title" class="form-control input-md">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label"...

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%;
    max-height:320px;
}
.modal-body .col-sm-6, .modal-body .col-sm-6 {
    padding-right: 0px;
    padding-left: 0px;
}
.modal-body .col-sm-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;
}

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())
});