JSFiddle - React, Tailwind, and code Playground

by pmatseykanets

HTML

<!DOCTYPE html>

<html>
<head>
    <title>untitled</title>
</head>
<body>
<style>
#box{
    width:400px;
    height:230px;
    /*background-color: pink;*/
    margin:50 auto 0;
    padding-top:20px;
    padding-left:40px ;
}

p{
    margin: 0;
}

#area {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 68px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 350px;
}

#area em {
    color: red;
    text-decoration: line-through;
}
    
#tweet{
    margin-left: 130px;
}


</style>
    <div id="box">
            <p>(Maximum Allowed Characters : 160)</p>
        <p><div id="area" contenteditable="true"></div></p>
            <span id="message"> 160 </span> Characters Remaining
            <input type="button" id="tweet" value="Tweet"/>
    </div>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire...