JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="flex">
<div>
<label><input type='radio' class='btn' name='left' data-cls='{
"width": "200px",
"height": "150px"
}'>1</label>
<label><input type='radio' class='btn' name='left' data-cls='{
"width": "250px",
"height": "150px"
}'>2</label>
</div>
<div class="flex">
<div id="bSd"></div>
</div>
<div>
<label><input type='radio' class='btn' name='right' data-cls='{
"background-color": "#999",
"color": "#333"
}'>3</label>
<label><input type='radio' class='btn' name='right' data-cls='{
"background-color": "#333",
"color": "#fff"
}'>4</label>
</div>
</div>
<div class="cont">
<textarea class='f1rem custom-textarea' id='form_code'></textarea>
<script>
form_code.innerHTML += '<div id="bSd">' + '\n' + '<div class="display">' + '</div>' + '\n' + '</div>' + '\n' + '<style>' + '\n' + '#bSd {' + '\n' + 'width:' + '' + ';' + '\n' + 'height:' + '' + ';' + '\n' + 'background-color:' + '' + ';' + '\n' + 'border-radius:' + '' + ';' + '\n' + 'box-shadow:' + '' + ';' + '\n' + '}' + '\n' + '.display {' + '\n' + 'background: linear-gradient(45deg, #e5ebf2, #f2f6fa);' + '\n' + 'border-radius: 8px;' + '\n' + 'min-height: 200px;' + '\n' + 'height: 100%;' + '\n' + 'padding: 15px;' + '\n' + '}' + '\n' + '</style>';
</script>
</div>
CSS
body {
margin: 0 auto;
padding: 50px;
}
#bSd {
display: block;
width: 150px;
height: 150px;
margin: 0 auto;
background: #fafafa;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.cont {
margin-top: 20px;
width: 100%;
background: #fafafa;
display: block;
align-items: center;
height: 40px;
position: realtive;
}
.custom-textarea {
width: 100%;
min-height: 150px;
}
JavaScript
$(function() {
var b = $('.btn'),
cls = {},
str = '';
b.click(function() {
cls = $(this).data("cls");
$('#bSd').css(cls);
});
});