JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title >Text Area with no Carat</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
        .textarea-wrapper {
            position:relative;
        }
        .textarea-wrapper textarea {
            background-color:blue;
        }
        .textarea-wrapper, .textarea-wrapper textarea {
            width:50px;
            height:50px;
        }
        .textarea-wrapper textarea.hidden {
            color:red;
            opacity:0.00;
            filter:alpha(opacity=00);
            position:absolute;
            top:0px;
            left:0px;
        }
    </style>
    <script type="text/javascript">
      
            function() {
                $("textarea").addClass("-real-textarea");
                $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
                $(".textarea-wrapper textarea.hidden").keyup(
                    function() {
                        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
                    }
                );
                $(".textarea-wrapper textarea.-real-textarea").focus(
                    function() {
                        $(this).parent().find("textarea.hidden").focus();
                    }
                );
            }
 
    </script>
</head>
<body>

    <div class="textarea-wrapper">
        <textarea></textarea>
    </div>

</body>
</html>

CSS

#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}