JSFiddle - React, Tailwind, and code Playground

by Chris Deeming

HTML

<div class="block">
  <div class="block-container">
    <div class="block-row">
      Copy the following text (triple click is easier) into the content editable section below:
    </div>
    <div class="block-row block-row--emphasis" dir="rtl">
      <p><strong>זה</strong> אחד מהסטרואידים הפופולארים, אחרי דקה ודיאנבול, הסטרואיד הזה נמצא בשימוש רב אצל אתלטים, חלק מהקורבנות היו הקנדי בן ג'ונסון, אשר זכה במדליית כסף בריצת 100 מטר באולימפיאדה ב1988. אבל מאז כמות האנשים אשר נמצא אצלהם הסטרואיד הזה עלה בצורה מעריכית. בבאדי-בילדינג שאון ריי נמצא בדמו הסטרואיד וינסטרול בתחרות ארנולד שווצנגר קלאסיק, ריי היה המנצח של התחרות הזו, אבל גם אצל הקנדי נימרוד קינג נמצא הוינסטרול.</p>
    </div>
    <div class="block-row block-row--editable" contenteditable="true">
      Paste here...
    </div>
    <div class="block-row">
      Instead of "1988" being pasted, it becomes "19888".
    </div>
  </div>
</div>

SCSS

html
{
  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
}

.block
{
	margin: 20px 0;
}

.block-container
{
  color: #141414;
  background: #fefefe;
  border-width: 1px;
  border-style: solid;
  border-top-color: #e2e2e2;
  border-right-color: #dadada;
  border-bottom-color: #d0d0d0;
  border-left-color: #dadada;
  border-radius: 4px;
}

.block-row
{
  margin: 0;
  padding: 6px 10px;
  
  &.block-row--emphasis
  {
    font-style: italic;
    font-size: 80%;
  }
  
  &.block-row--editable
  {
    border: 1px solid #aaa;
    border-radius: 5px;
    margin: 10px;
    padding: 5px;
    min-height: 100px;
    outline: none;
  }
}