JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://beulu.com/temp/js/jquery.js"></script>
<script src="http://beulu.com/temp/js/fixed-topmenu.js"></script>
<script src="http://beulu.com/temp/js/backtop.js"></script>
 
      <div>
        <div class="center_div">
         <div class="header_div">
                <table width="100%" border="0" cellpadding="0" cellspacing="10">
                  <tr>
                    <td rowspan="2" class="logo_area">
                      Beulu.ORG
                    </td>
                    <td width="300" align="center">
                      <div class="search-box"><form method="get" action="/cgi-bin/search.en.cgi">		   	
        <input size="15" class="search-field" name="q" value="Search..." onfocus="if(this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type="text">
            <input name="cmd" class="search-go" value=" " type="submit">
            <input name="form" value="extented" type="hidden">
            <input name="wm" value="sub" type="hidden">
          </form></div>
                    </td>
                  </tr>
                  <tr>
                    <td align="center">
                      <div style="font-size:12px"><a class="lang" href="/lang/switch?lang=fr">Fran&ccedil;ais</a>&nbsp;&nbsp;<b>English</b></div>
                    </td>
                  </tr>
                </table>
             </div>
          
                   <div class="horizontal_column">
                      <div class="horizontal_center">
                <div id="nav_bar">
                  <table class="linkcontainer" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>
                        <div class="navigation">
                          <a href="/" class="main_link">Home</a>
                        </div>
                      </td>
                      <td>
                        <div class="navigation">
                          <a...

CSS

body {
margin: 0px;
background-color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 15px;
color: #333;
}
.navbar-fixed {
top: 0px;
left: 0px;
right: 0px;
z-index: 100;
position: fixed;
}
div.center_div {
overflow: hidden;
display:block;
margin: 0px auto;
width: 798px;
border-top: none;
z-index: 1;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
-moz-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-o-border-bottom-left-radius: 30px;
-o-border-bottom-right-radius: 30px;
-moz-box-shadow: 0px 0px 40px 10px #000000;
-webkit-box-shadow: 0px 0px 40px 10px #000000;
-o-box-shadow: 0px 0px 40px 10px #000000;
box-shadow: 0px 0px 40px 10px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=40);
}
#nav_bar {
background-image: url(http://beulu.com/temp/images_template/header_bg_min.jpg);
border: 0px;
margin: 0px auto;
width: 798px;
height: 50px;
}
table.linkcontainer td{
background-color: #000000;
filter:alpha(opacity=70);
opacity: .7;
-moz-opacity: .7;
}
table.body_content {
width:100%;
padding: 0px;
margin: 0px;        
background-image: url(http://beulu.com/temp/images_template/bg_content.jpg);
background-repeat: repeat;
}  
#html5Loader{
top:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,0.95);
position:fixed;
z-index:99;
}
#html5Loader .fallback {
top:50%;
position:absolute;
text-align:center;
width:100%;
color:white;
vertical-align: middle;
display: block;
font-style: normal;
}
div#wrapper > * {
width:400px;
}
p { text-align: justify;}
h2 { font-size: 16px; }
h3 { font-size: 15px; }
img { border: none; }
.Comment { color: #8080ff; }
.Constant { color: #ff6060; }
.Special { color: #ff40ff; }
.Statement { color: #ffff00; }
.PreProc { color: #ff40ff; }
.Type { color: #00ff00; }
a.supportBadges {
margin-right:5px;
opacity:0.7;
}
a.supportBadges:hover {
opacity:1;
}
hr{
border-top: dashed white 1px;
border-bottom:...

JavaScript

$(document).ready(function() {

		$(window).scroll(function () {
			//if you hard code, then use console
			//.log to determine when you want the 
			//nav bar to stick.  
			//console.log($(window).scrollTop())
			if ($(window).scrollTop() > 315) {
			$('.horizontal_center').addClass('navbar-fixed');
			}
			if ($(window).scrollTop() < 315) {
			$('.horizontal_center').removeClass('navbar-fixed');
			}
			});
		});