JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>
New SMS/TXT Message
        </title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/glass_grey.css">
        <script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>
        
                
        <style type="text/css">
        form#newsms label.error { display: none; 
        margin-top: 5px;
        color: red;}
        .appropriateError{
        color: red;
        }
        .emphasise{
        color: red;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <!--HEADER-->
            <div id="header">
                <h1>
New SMS/TXT Message
                </h1>
            </div>
            <!--Navigation Menu-->
            <?php  include_once 'navigation.php' ?><!--PAGE BODY-->
            <div class="emphasise">
                <?php
                if ($errorMessage != '') {
                 echo $errorMessage; 
                die;
                }
                ?>
                </div>
            <div id="content">
                <h1>
                    Create New SMS/TXT Message to <?php echo $record->getField('NameFull_c')   ;?>
                    
                </h1>
                <form method="post" action="demosendsms.php" id='newsms'>
                <input type="hidden" name="-action" value="new">
                <input type="hidden" name="_kp_ContactID" value="<?php echo nl2br( $record->getField('_kp_ContactID'))?>">
                    <table >
                    <tr class="field">
                            <td class="field_name">
              ...

CSS

/*  Glass (Grey) CSS template



*/
body {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;   
    margin: 0px;
    padding:0px;
}

h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
}

.center {
    text-align:center;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}

/***
 * 3 major sections of page: Header, Container(body), and Footer */
#header{
    background: #FFFFFF url('../images/glass_grey_header.jpg') repeat-x;
    height: 102px;
    width:100%;
}

#header h1 {
    padding-top: 40px;
    padding-left: 20px;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 30px;
    line-height:30px;
    margin:0px;
}

#container {
    background-color: #ffffff;
    margin: 0px;
    padding:0px;
}

#page_nav{
    width: 100%;
    padding: 0px;
    background: transparent;
}

#content {
    padding: 0px 25px 26px;
}

#content h1 {
    color: #666666;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
}

#content h2 {
    color: #333333;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
}

#page_nav ul {
    list-style-type:none;
    background: url('../images/glass_grey_nav_bkgrnd.jpg') repeat-x   transparent;
    margin-left: 0px;
    margin-top: 0px;
    white-space: nowrap;
    padding: 0px;
    height: 23px;
}

#page_nav li {
    display: inline;
    list-style-type: none;
    margin-left: 20px;
    font-weight: bold;
    margin-top: 0px;
    font-size: 11px;
}
#page_nav li a{
    color:#FFFFFF;
    text-decoration:none;
}

.recordlist_nav {
    font-size: 12px;
    color: #7e7e7e;
    font-variant: normal;
    text-align: right;
    margin-bottom: 5px;
}

table.record {
    padding: 3px 0px 3px 0px;
}

td.field_name {
    color: #000102;
    font-size:12px;
    vertical-align:top;
    text-align: right;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:10px;
}

td.field_data {
    color:#585858;
    font-size:12px;
    text-align: left;
    padding-top:5px;
   ...

JavaScript

<script type="text/javascript">
        $.metadata.setType("attr", "validate");
          $(document).ready(function(){
           $("#newsms").validate();
          });
          </script>
        
        <script type="text/javascript">
        $(document).ready(function() {
var $chars = $('#char');
var $msgs = $('#msgs');
var $remg = $('#remg');

$('#smsbody').keyup(function(evt) {
    var len = this.value.length;
    $chars.text(len);
    if(len <= 160) {
        $msgs.text((len && 1) || 0);
        $remg.text(160 - len);
    } else {
        var multi = Math.ceil((len/153)) ;
        $msgs.text(multi);
        $remg.text((multi * 153) - len);
    }
});
});
        </script>