JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
            <div id="top">
                
top
            </div>
            <div class="fw-spacer">
                &nbsp;
            </div>
            <div id="content">
                <table style=" width:100%;" dir="ltr">
                    <tbody>
                        <tr>
                            <td colspan="4">
                                <input name="TextBox1" type="text" id="TextBox1" />
                            </td>
                            <td style="background-color: #EEEEEE;">نام کتاب</td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <input name="TextBox4" type="text" id="TextBox4" class="ltr" />
                            </td>
                            <td style="background-color: #EEEEEE;">نام لاتین کتاب</td>
                        </tr>
                        <tr>
                            <td>
                                <input name="TextBox3" type="text" id="TextBox3" />
                            </td>
                            <td style="text-align: left; background-color: #EEEEEE;">مترجم</td>
                            <td style="width:4%;"></td>
                            <td style="width:33%;">
                                <input name="TextBox2" type="text" id="TextBox2" />
                            </td>
                            <td style="background-color: #EEEEEE;">مولف</td>
                        </tr>
                        <tr>
                            <td>
                                <input name="TextBox6" type="text" id="TextBox6" />
                            </td>
                            <td style="text-align: left; background-color: #EEEEEE;">سال نشر</td>
                            <td></td>
                            <td>
                                <input name="TextBox5" type="text" id="TextBox5" />
                            </td>
                   ...

CSS

@import url("sen.css");
input[type=text]
{
    text-align:right;
    direction:rtl;
}
.ltr
{
    text-align:left !important;
    direction:ltr !important;
}
body {
    background-repeat:repeat;
}

#wrapper
{
    display:block;
    width: 900px;
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(255,255,255,0.3);
    box-shadow: 0px 0px 10px 0.2px rgba(0, 0, 0, 0.4);
    padding: 0 10px;
    overflow:hidden;
    
}
#wrapper, #wrapper *
{
    font-family:Tahoma;
    font-size:12px;
}
#wrapper table, #wrapper td, #wrapper tr
{
    border:none;
}
#top
{
    width: 96%;
    padding:5px 2%;
    height: 30px;
    border-radius: 0px 0px 10px 10px;
    background-color:#000;
    color:#fff;
}
#top a
{
    color:#fff;
    text-decoration:underline;
}
#right
{
    float:right;
    width: 140px;
    padding: 5px;
    border-radius:5px;
    box-shadow: 0px 0px 10px 0.2px rgba(0, 0, 0, 0.4);
    text-align:right;
    direction:rtl;
    background-color:#fff;
}
#content
{
    float:left;
    width: 730px;
    padding:5px;
    border-radius:5px;
    box-shadow: 0px 0px 10px 0.2px rgba(0, 0, 0, 0.4);
    text-align:right;
    direction:rtl;
    background-color:#fff;
    overflow:hidden;
}
#footer
{
    border-radius: 10px 10px 0px 0px;
    height:20px;
    width: 96%;
    padding:5px 2%;
    background-color:#000;
    color:#fff;
    clear:both;
}
.fw-spacer
{
    width: 100%;
    display: block;
    height:10px;
}

JavaScript

/*http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery.html*/

        $(document).ready(function () {
            positionFooter();

            $(window)
              .scroll(positionFooter)
              .resize(positionFooter);

            function positionFooter() {
                alert($("#sticky-footer-push").height());
                var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                if (docHeight < $(window).height()) {
                    var diff = $(window).height() - docHeight;
                    if (!$("#sticky-footer-push").length > 0) {
                        $("#footer").before('<div id="sticky-footer-push"></div>');
                    }
                    $("#sticky-footer-push").height(diff);
                }
            }
        });

        $(window).load(function () {
            $("#footer").stickyFooter();
        });

        // sticky footer plugin
        (function ($) {
            var footer;

            $.fn.extend({
                stickyFooter: function (options) {
                    footer = this;

                    positionFooter();

                    $(window)
                      .scroll(positionFooter)
                      .resize(positionFooter);

                    function positionFooter() {
                        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                        if (docHeight < $(window).height()) {
                            var diff = $(window).height() - docHeight;
                            if (!$("#sticky-footer-push").length > 0) {
                                $(footer).before('<div id="sticky-footer-push"></div>');
                            }
                            $("#sticky-footer-push").height(diff);
                        }
                    }
                }
            });
        })(jQuery);