JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="lined" rows="20" cols="60">.linedwrap {
    border: 1px solid #c0c0c0;
    padding: 3px;
}

.linedtextarea {
    padding: 0px;
    margin: 0px;
}

.linedtextarea textarea, .linedwrap .codelines .lineno {
    font-size: 10pt;
    font-family: monospace;
    line-height: normal !important;
}

.linedtextarea textarea {
    padding-right: 0.3em;
    padding-top: 0.3em;
    border: 0;
}

.linedwrap .lines {
    margin-top: 0px;
    width: 50px;
    float: left;
    overflow: hidden;
    border-right: 1px solid #c0c0c0;
    margin-right: 10px;
}

.linedwrap .codelines {
    padding-top: 5px;
}

.linedwrap .codelines .lineno {
    color: #AAAAAA;
    padding-right: 0.5em;
    padding-top: 0.0em;
    text-align: right;
    white-space: nowrap;
}

.linedwrap .codelines .lineselect {
    color: red;
} 
</textarea>

CSS

/**
 * jQuery Lined Textarea Plugin
 *   http://alan.blog-city.com/jquerylinedtextarea.htm
 *
 * Copyright (c) 2010 Alan Williamson
 *
 * Released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Usage:
 *   Displays a line number count column to the left of the textarea
 *   
 *   Class up your textarea with a given class, or target it directly
 *   with JQuery Selectors
 *   
 *   $(".lined").linedtextarea({
 *   	selectedLine: 10,
 *    selectedClass: 'lineselect'
 *   });
 *
 */

.linedwrap {
    border: 1px solid #c0c0c0;
    padding: 3px;
}

.linedtextarea {
    padding: 0px;
    margin: 0px;
}

.linedtextarea textarea, .linedwrap .codelines .lineno {
    font-size: 10pt;
    font-family: monospace;
    line-height: normal !important;
}

.linedtextarea textarea {
    padding-right: 0.3em;
    padding-top: 0.3em;
    border: 0;
}

.linedwrap .lines {
    margin-top: 0px;
    width: 50px;
    float: left;
    overflow: hidden;
    border-right: 1px solid #c0c0c0;
    margin-right: 10px;
}

.linedwrap .codelines {
    padding-top: 5px;
}

.linedwrap .codelines .lineno {
    color: #AAAAAA;
    padding-right: 0.5em;
    padding-top: 0.0em;
    text-align: right;
    white-space: nowrap;
}

.linedwrap .codelines .lineselect {
    color: red;
}

JavaScript

/**
 * jQuery Lined Textarea Plugin 
 *   http://alan.blog-city.com/jquerylinedtextarea.htm
 *
 * Copyright (c) 2010 Alan Williamson
 * 
 * Version: 
 *    $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z alan $
 *
 * Released under the MIT License:
 *    http://www.opensource.org/licenses/mit-license.php
 * 
 * Usage:
 *   Displays a line number count column to the left of the textarea
 *   
 *   Class up your textarea with a given class, or target it directly
 *   with JQuery Selectors
 *   
 *   $(".lined").linedtextarea({
 *   	selectedLine: 10,
 *    selectedClass: 'lineselect'
 *   });
 *
 * History:
 *   - 2010.01.08: Fixed a Google Chrome layout problem
 *   - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
 *   - 2010.01.06: Initial Release
 *
 */ (function($) {

    $.fn.linedtextarea = function(options) {

        // Get the Options
        var opts = $.extend({}, $.fn.linedtextarea.defaults, options);


        /*
         * Helper function to make sure the line numbers are always
         * kept up to the current system
         */
        var fillOutLines = function(codeLines, h, lineNo) {
            while ((codeLines.height() - h) <= 0) {
                if (lineNo == opts.selectedLine) codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
                else codeLines.append("<div class='lineno'>" + lineNo + "</div>");

                lineNo++;
            }
            return lineNo;
        };


        /*
         * Iterate through each of the elements are to be applied to
         */
        return this.each(function() {
            var lineNo = 1;
            var textarea = $(this);

            /* Turn off the wrapping of as we don't want to screw up the line numbers */
            textarea.attr("wrap", "off");
            textarea.css({
                resize: 'none'
            });
            var originalTextAreaWidth = textarea.outerWidth();

            /* Wrap the text area in the...