JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<div id="container">
<form class="cmxform" id="commentForm" method="get" action="">
  <div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;">
  <img src="images/bg2_01.jpg" alt="" width="817" border="0" align="top" id="" style="width:969px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;">
<img src="images/bv01003_01_01_01.png" id="" alt="" align="top" border="0" style="width:969px;height:245px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>

<div id="bv_" style="margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;">
  <img src="images/leftbar.jpg" id="" alt="" align="top" border="0" style="width:197px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left;...

CSS

.error {
    color: #f00;
}

div#container
{
    width: 800px;
    height: 1200px;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
}

body
{  
   background-color: #FFFFFF;
   color: #000000;

}

a:active
{
   color: #0000FF;
}
a:hover
{
   color: #E49282;
}

JavaScript

window.onload = function () {
    
    
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {

        // validate form on keyup and submit
        $("#commentForm").validate({
            rules: {
                firstname: "required",
                Lastname: "required",
                Email: {
                    required: true,
                    email: true
                },
                Telephone: "required",
                topic: {
                    required: true
                },
                TextArea1: "required"
            },
            messages: {
                firstname: "Please enter your first name",
                Lastname: "Please enter your last name",
                Email: "Please enter a valid email address",
                Telephone: "Please enter your phone number",
                topic: "Please choose a topic",
                TextArea1: "Please tell us what's on your mind"
            }
        });

    });
    
}