JSFiddle - React, Tailwind, and code Playground

by JamesD

HTML

<textarea class="edit" rows="10"></textarea>

CSS

pre {
	position: absolute;
	z-index: -1;
	
	outline: 1px dashed red;
}

.edit {
    outline: 1px dotted blue;
    opacity: 1;
	width: 50%;
    
	color: #f00;
    -webkit-text-fill-color: transparent;
    
	border: 0px solid transparent;
	background: transparent;
	
	resize: vertical;
}

pre, .edit {
	overflow: auto;
	margin: 0;
	padding: 0;
	
	tab-size: 4;
	-o-tab-size: 4;
	-moz-tab-size: 4;
	
	line-height: 17px;
	font-family: monospace; 
	font-size: 13px;
}

JavaScript

$(document).ready(function() {
    $('.edit').after('<pre></pre>');
    
    var $code = $('pre');
    var position = $('.edit').position();
    
    $code.css('left', position.left + 'px');
	$code.css('top', position.top + 'px');
	$code.css('width', $('.edit').innerWidth() + 'px');
	$code.css('height', $('.edit').innerHeight() + 'px');
    
    $('.edit').on('input', function() {
         $('pre').html($(this).val());   
    });
});