JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="bubble-playground">
    <div id="bubble-demo" class="pf-bubble" data-direction="L" data-color="yg">
        <div class="pf-bubble-wrapper">
            <div class="pf-bubble-bg"></div>
            <div class="pf-bubble-name">なまえ</div>
            <div class="pf-bubble-content">
            <div class="pf-bubble-message">ピグファンタジアへようこそ！</div>
            <i class="pf-icon pf-bubble-arrow"></i></div>
        </div>
    </div>
</div>
<div id="bubble-control">
    <label for="bubble-mode">モード</label>
    <select id="bubble-mode" data-code="mode">
        <option value="normal">デフォルト</option>
        <option value="full">フルサイズ</option>
        <option value="system">システム</option>
        <option value="quest">クエスト情報</option>
        <option value="stand">ログインボーナス</option>
        <option value="cinema">シネマ</option>
    </select>
    <label for="bubble-type">タイプ</label>
    <select id="bubble-type" data-code="type">
        <option value="talk">トーク</option>
        <option value="think">心の声</option>
    </select>
    <label for="bubble-color">色</label>
    <select id="bubble-color" data-code="color">
        <option value="yg">Normal</option>
        <option value="pk">Pink</option>
        <option value="bl">Blue</option>
        <option value="or">Orange</option>
        <option value="ch">Chocolate</option>
        <option value="pu">Purple</option>
        <option value="tu">Turquoise</option>
    </select>
    <label for="bubble-direction">向き</label>
    <select id="bubble-direction" data-code="direction">
        <option value="L">L</option>
        <option value="R">R</option>
    </select>
    <label><input type="checkbox" id="bubble-arrow"> 矢印の表示</label>
    <div>
        <textarea cols="40" rows="3" id="bubble-message" placeholder="ふきだしのテキスト"></textarea>
    </div>
</div>

CSS

html, body {
height: 100%;
color: #fff;
background: #2a1703;
}
        #bubble-playground {
            width:320px;
            height:256px;
            margin:0 auto;
            background-image: url(http://stat.dev.fantasia.amsg2.com/stat/a/HEAD/s/wall/wall_basenatural1211/img/9f752590ae3a7a83d4a79dd67968db1b.png);
            background-position:center;
            background-repeat:no-repeat;
            position:relative;
            background-size: 350px 344px !important;
        }

        #bubble-demo {
            position: absolute;
            top:100px;
            left:50%;
            border: solid 1px red;
        }

        #bubble-demo[data-mode="full"],
        #bubble-demo[data-mode="system"]{
            top:auto;
            bottom:10px;
        }

        #bubble-demo[data-mode="quest"] {
            left:5%;
        }

        #bubble-demo[data-mode="stand"] {
            top:30px;
            left:5px;
        }

        #bubble-demo[data-mode="cinema"] {
            left:0;
        }

        #bubble-control {
            font-size:12px;
            text-align: center;
            margin:10px auto;
            color:#fff;
        }

/***************/
.pf-bubble-message > p {
margin: 0 !important;
}

.pf-bubble,
.pf-bubble * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #2A1702;
    font-family: "Hiragino Kaku Gothic Pro W6", "ヒラギノ角ゴ Pro W6", 'HiraKakuProN-W6', 'Droid Font', Helvetica, "Helvetica Bold", Helvetica-Bold, sans-serif;
}
.pf-bubble, .pf-bubble *,
.pf-bubble::before, .pf-bubble::after,
.pf-bubble *::before, .pf-bubble::after {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
}


.pf-bubble-wrapper, .pf-bubble[data-type="think"] .pf-bubble-wrapper::before, .pf-bubble[data-type="think"] .pf-bubble-wrapper::after {
  -webkit-box-shadow: 1px 1px 2px...

JavaScript

$(function(){

    var $bubble = $('#bubble-demo');
    var $bubbleMessage = $bubble.find('.pf-bubble-message');

    $.each($('select'), function(i, el) {

       $(el).change(function() {

          var code = $(this).attr('data-code');
          var val = $(this).val();
          $bubble.attr('data-' + code, val);

          if (code === 'mode') {

              switch(val) {
                  case 'quest':
                    $bubble.prepend($bubble.find('.pf-bubble-name'));
                  break;
                  case 'stand':
                    $bubble.attr('data-type', 'talk');
                  break;
                  case 'cinema':
                    $(document.body).attr('id', 'cinema');
                  break;
                  default:
                    $bubble.find('.pf-bubble-bg').after($bubble.find('.pf-bubble-name'));
              }
          }

       });
    });

    $('#bubble-arrow').click(function(){
        $bubble.find('.pf-bubble-arrow').toggle($(this).is(':checked'));
    });

    $('#bubble-message').on('keyup', function() {
        $bubbleMessage.html($(this).val().replace(/\n/ig,'<br>'));
    });
});