JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div id="listing-2-3">
    <h2>Listing 2.3</h2>
    <form action="post_comment.php" method="post">
        <h3>Post Comment</h3>
        <label>
            <h4>Your Name:</h4>
            <input type="text" name="fullname">
        </label>
        <label>
            <h4>Your Email:</h4>
            <input type="email" name="email">
        </label>
        <label>
            <h4>Your Comment:</h4>
            <textarea name="comment"></textarea>
        </label>
    </form>
</div>
<div id="listing-2-4">
    <h2>Listing 2.4</h2>
    <form action="post_comment.php" method="post">
        <h3>Post Comment</h3>
        <label>
            <h4>Your Name:</h4>
            <input type="text" name="fullname">
        </label>
        <label>
            <h4>Your Email:</h4>
            <input type="email" name="email">
        </label>
        <label>
            <h4>Your Comment:</h4>
            <textarea name="comment"></textarea>
        </label>
    </form>
</div>

CSS

label {
    clear: left;
    float: left;
    width: 100%;
    padding: 5px 0;
}

input,
textarea {
   padding: 5px;
   width: 200px;   
   border: 1px solid #ccc; 
   background: #e4e4e4;
}

h2 {
 font-size: 14px;
 margin: 0 0 15px 0;
 color: #666;
 padding: 0 0 10px 0; 
 border-bottom: 1px solid #ccc; 
}

h3 {
 font-size: 22px;  
 margin: 0 0 15px 0; 
}

h4 {
 font-size: 14px;
 display: block;
 float: left; 
 width: 125px;
}

JavaScript

$("#listing-2-3 input, #listing-2-3 textarea").css({ 
                          "background":"#f2c564",
                          "border":"1px solid #d7a029" 
                         });

$("#listing-2-4 input, #listing-2-4 textarea").parent().css({ 
                          "background":"#f2c564",
                          "border":"1px solid #d7a029"
                         });