JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="main_area" class="row-fluid">
    <div class="span10 offset1">
        <div id="formAlert" class="alert hide">  
          <a class="close">×</a>  
          <strong>Warning!</strong> Make sure all fields are filled and try again.
        </div>
        
        <form name="register" action="" method="post">
            <input type="text" name="username" />
            <br />
            <input type="submit" class="btn btn-primary" value="Submit" />
        </form>
    </div>
</div>

CSS

#main_area {
    margin-top: 50px;
}

JavaScript

$(document).ready(function () {
    // Run this code only when the DOM (all elements) are ready
    
    $('form[name="register"]').on("submit", function (e) {
        // Find all <form>s with the name "register", and bind a "submit" event handler
        
        // Find the <input /> element with the name "username"
        var username = $(this).find('input[name="username"]');
        if ($.trim(username.val()) === "") {
            // If its value is empty
            e.preventDefault();    // Stop the form from submitting
            $("#formAlert").slideDown(400);    // Show the Alert
        } else {
            e.preventDefault();    // Not needed, just for demonstration
            $("#formAlert").slideUp(400, function () {    // Hide the Alert (if visible)
                alert("Would be submitting form");    // Not needed, just for demonstration
                username.val("");    // Not needed, just for demonstration
            });
        }
    });
    
    $(".alert").find(".close").on("click", function (e) {
        // Find all elements with the "alert" class, get all descendant elements with the class "close", and bind a "click" event handler
        e.stopPropagation();    // Don't allow the click to bubble up the DOM
        e.preventDefault();    // Don't let any default functionality occur (in case it's a link)
        $(this).closest(".alert").slideUp(400);    // Hide this specific Alert
    });
});