JSFiddle - React, Tailwind, and code Playground

by Guilherme Santana

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<div class="form-group">
<label style="color: #fff">Literal Expression</label><br />
  <div class="col-md-10">
    <textarea rows="3" cols="73" name="replycontent" id="replycontent"></textarea>
    <style>
      .btn {
        position: relative;
      }

    </style>
  </div>
</div>

<div class="form-group">
<label style="color: #fff">Mathematical Expression</label><br />
  <div class="col-md-10">
    <textarea rows="2" cols="73" name="replycontentmath" id="replycontentmath"></textarea>
    <style>
      .btn {
        position: relative;
      }

    </style>
  </div>
</div>

<div>
  <input type="checkbox" value="2" class="devs" checked />
  <label style="color: #fff">Close Parenthesis Automatically</label><br />
</div>

<div class="col-md-8 " style="background-color: aliceblue; padding: 10px; border">
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=p 1n value="p1n">p1n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=pin value="pin">pin</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=er2n value="er2n">er2n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=e1n value="e1n">e1n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=freq value="freq">freq</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=er3n value="er3n">er3n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=pr2n value="pr2n">pr2n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=v2n value="v2n">v2n</a>
  <a href="" class="btn btn-info btn-mini" style="margin-right: 20px; " data-text=i1n value="i1n">i1n</a>
  <a href=""...

CSS

body {
  background: gray;
  padding: 5px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

div {
    display: inline-block;
    margin: 5px 5px;
    border: 2px dotted #AAA
}

JavaScript

$("a[data-text]").click(function() {
      var value = $("#replycontent").val();
      $("#replycontent").val(value + ' ' + $(this).attr("data-text"));
      return false;
    })

    $("a[value]").click(function() {
      var value = $("#replycontentmath").val();
      $("#replycontentmath").val(value + ' ' + $(this).attr("value"));
      return false;
    })

    var $code = $('#replycontentmath');
    $('.button-element').on('mouseup', function() {
      $(this).data('inputFocused', $code.is(":focus"));
    }).click(function() {
      if ($(this).data('inputFocused')) {

        $code.blur();
      } else {
        $code.focus();
      }
    });