JSFiddle - React, Tailwind, and code Playground

by plantface

HTML

<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

$rule-height: 20px; // <-- primary parameter

// depending on your chosen font-family, you might want to play around with these. 
// For example, 'Marck Script' is much larger than 'Reenie Beanie'
$min-font-size: 10pt; // 8pt for 'Marck Script'
$max-font-size: 20pt; // 13pt for 'Marck Script'
$rule-height-to-font-size-factor: 1.2; // .5 for 'Marck Script'

  // auto-sizing calculations
  $font-size: min(max($rule-height * $rule-height-to-font-size-factor, $min-font-size), $max-font-size);
  $rule-mask-height: $rule-height - 1;
  $rule-padding-top: $rule-height + 2;
  $rule-padding-right: $rule-height;
  $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;
$text-color: #000000;

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: $text-color;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top; // spacing fix: https://stackoverflow.com/a/7144960/441662
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: $font-size;
  line-height: $rule-height;
  margin: 2% auto;
  padding: $rule-padding-top $rule-height 3px $rule-padding-left;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: $paper-color;
  background-image: 
    -moz-linear-gradient(top, transparent, transparent $rule-mask-height, $line-color 0px), 
    -moz-radial-gradient(4% 50%, circle closest-corner, $hole-fill-color, $hole-fill-color 39%, transparent 0%), 
    -moz-radial-gradient(3.9% 46%, circle closest-corner, $hole-shadow, $hole-shadow 43.5%, transparent 0%);
  background-image: 
    -webkit-linear-gradient(top, transparent, transparent $rule-mask-height, $line-color 0), 
    -webkit-radial-gradient(4% 50%, circle closest-corner, $hole-fill-color, $hole-fill-color 39%, transparent 0%), 
   ...