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="bSm"></div>
  </div>

  <div>
    <label><input type='radio' class='btn' name='right' data-cls='{
    "background": "linear-gradient(to bottom, green, red)",
    "color": "#333"
    }'>3</label>

    <label><input type='radio' class='btn' name='right' data-cls='{
    "background": "linear-gradient(to top, yellow, blue)",
    "color": "#fff"
    }'>4</label>
  </div>
</div>

<div class="cont">
<ul>
<li>
  <label><input type='checkbox' class='btn_cls' name='left' data-cls='utilOne' id='choiseFuncOne'><span>Добавить вспевдоэлементы</span></label>
  </li>
  <li>
  <label><input type='checkbox' class='btn_cls' name='left' data-cls='utilTwo' id='choiseFuncTwo'><span>Добавить вспевдоэлементы</span></label></li>
</ul>
</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' + '}' + '\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;
}

#bSm {
  position: relative;
  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;
}

#bSm.utilOne:before {
  position: absolute;
  content: '';
  background: green;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
}

#bSm.utilOne:after {
  position: absolute;
  content: '';
  background: red;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
}

#bSm.utilTwo:before {
  position: absolute;
  content: '';
  background: blue;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
}

#bSm.utilTwo:after {
  position: absolute;
  content: '';
  background: yellow;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
}

JavaScript

$('.btn').click(function() {
  $('#bSm').val();
  $('#bSm').css($(this).data('cls'));

  var bsmStyles = $('#bSm').attr('style').replace(/; /g, ';\n');
  var val = $('#form_code').val();

  $('#form_code').val(val.replace(/#bSd \{([\s\S]*?)\}/, `#bSd {\n${bsmStyles}\n}`));
});


$(function() {
  var b = $('.btn_cls');
  b.click(function() {
    var cls = $(this).data("cls");
    $('#bSm').toggleClass(cls);
  });
});