JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.3/jquery-impromptu.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.3/jquery-impromptu.js"></script>
<button class="prompt" data-version="short">Open Prompt (short)</button>
<button class="prompt" data-version="long">Open Prompt (long)</button>
<hr />
<div class='output'></div>

CSS

.textarea {
  width: 100%;
  height: 80px;
  resize: none;
}

JavaScript

$('html').on('click', '.prompt', function(e) {
  e.preventDefault();

  var version = $(this).data('version'),
    output = {
      short: "test data\ntest data\ntest data\ntest data",
      long: "test data\ntest data\ntest data\ntest data\ntest data\ntest data\n\
             test data\ntest data\ntest data\ntest data\ntest data\ntest data\n\
             test data\ntest data\ntest data\ntest data\ntest data\ntest data\n"
    },
    display = '<textarea class="textarea">' + output[version] + '</textarea>';

  $.prompt(display, {
    buttons: {
      'Close': 'Close'
    }
  });

  $('.output').html(version + " clicked<br />" + $('.output').html())
})