JSFiddle - React, Tailwind, and code Playground

HTML

<script src="alphanumeric.js"></script>
<html>
<head>
<style>
@import 'images/style.css'
</style>
<script type="text/javascript" src="images/alphanumeric.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

</script>
<style>

</style>
</head>
<body>
<div class="anahat">
<div class="header">
<div class="leftheader"></div><div class="banner">GÜVENLİK YÖNETİM SİSTEMİ<img class="logout" align="right" src="images/logout.png"/></div><div align="right" class="mesaj">Çıkış Yap</div>
</div>
<div class="main">
<div class="icerik">
<div class="sekmeAlani">
	<!--[if !IE]>sekmeler<![endif]-->
	<ul class="sekmeler">
        <li><a href="javascript:void(0);" class="s1">Güvenlik Ayarları</a></li>
        <li><a href="javascript:void(0);" class="s2">Ziyaretçi İstatistik Ayarları</a></li>
	</ul>

	<!--[if !IE]>1. sekme icerigi<![endif]-->
	<div class="s1">
	<img  class="save" src="images/save.png" />
<form id="guvenlik">
<table border="0" width="80%">
<tr><td width="60%">Art arda kaç istekte kullanıcı uyarılsın?</td><td width="40%"><input class="imput" name="warfloodnum" value=""type="text" /></td></tr>
<tr class="wfloodnum"></tr>
<tr><td width="60%">Art arda kaç istekte kullanıcı engellensin?</td><td width="40%"><input class="imput" name="floodnum" value=""type="text" /></td></tr>
<tr class="nfloodnum"></tr>
</table>
</form>
	</div>

	<!--[if !IE]>2. sekme icerigi<![endif]-->
	<div class="s2">
		<p>This is a paragraph about the jQuery tabs tutorial.</p>
	</div>
	  </div> 
	  </div>
<div class="nav">
<ul class="menu" type="square" align="left"><li><a href="index.html">Ana Menü</a></li>
<li><a href="syscong.asp">Sistem Ayarları</a></li>
<li><a href="usrcong.html">Kullanıcı Ayarları</a></li> 
<li><a href="banneds.html">Engellenenler</a></li>
<li><a href="logs.html">Saldırı Kayıtları</a></li></ul>
</div>
</div>
</div>
<div class="tampon"></div>
<div class="footer"></div>
<script type="text/javascript"...

CSS

.save {
margin-top: -1em;
float: right;
padding-right: 2em;
}
.imput {
width: 4em;
margin-left: .7em;
}
/* sekme kodu */
.sekmeAlani ul.sekmeler {float: left; display: inline; min-width: 50em; width: auto;  margin: 0; padding: 0; background-color:#D6D8D4; }
.sekmeAlani ul.sekmeler li {list-style: none; float: left; margin: 0; padding: 0;  background-color:#D6D8D4; border-right: 1px solid #ccc; } 
.sekmeAlani ul.sekmeler li a {display: block; margin: 0; padding: 10px 12px; cursor:pointer; text-decoration:none; color: #000; font-family: Arial,Helvetica,sans-serif; font-weight: bold;} 
.sekmeAlani ul.sekmeler li a:hover {background-color:#e0e2de;} 

/* secili sekme  */
.sekmeAlani ul.sekmeler li.sekmeSecili {background-color:#e0e2de;} 

/* secili sekme icerigini gosterelim */
.sekmeAlani div {float: left; display: block; min-width: 50em; width: 50em;  min-height: 20em; height: 20em; padding-top: 2em; }

/* sekme iceriginde eger div varsa ona özel bir kod yazalim */
.sekmeAlani div div {margin-top:10px;}
tr .sfloodnum {
float: left;
margin-top: 1em;
}

JavaScript

$(document).ready(function(){ 
$(".sfloodnum").hide();
$(".mesaj").hide();
    $(."imput").numeric();
$.getJSON("ayarlar.asp",function(veri) {
$(".wfloodnum").html("Şu anki değer:" + veri.floodwarno);
});
var yenile = setInterval(function() {
$.getJSON("ayarlar.asp",function(veri) {
$(".wfloodnum").html("Şu anki değer:" + veri.floodwarno);
});
});
$.getJSON("ayarlar.asp",function(veri) {
$(".nfloodnum").html("Şu anki değer:" + veri.floodnum);
});
var yenile = setInterval(function() {
$.getJSON("ayarlar.asp",function(veri) {
$(".nfloodnum").html("Şu anki değer:" + veri.floodnum);
});
});
$(".logout").hover(
function() {
$(".mesaj").show();
},
function() {
$(".mesaj").hide();
});
$(".logout").click(function() {
window.location.href ("cikis.asp");
});
$(".save").hover(
function() {
$(".save").animate ({
'opacity':'0.5'
},'slow');
},
function() {
$(".save").animate ({
'opacity':'1'
},'slow');
});
$(".save").click(function(){
var form = $("#guvenlik").serialize();
$.ajax({
       type: 'POST',
       url: 'ayarlar.asp',
       data: form,
       success: alert(" Ayarlarınız başarıyla kaydedilmiştir.")
	   });
	    $("input[name=floodnum]").val("");
		 $("input[name=warfloodnum]").val("");
    });
	$("input[name=warfloodnum]").focus(function() {
	$(".wfloodnum").show(2000);
 });
 $("input[name=warfloodnum]").blur(function() {
 $(".wfloodnum").hide(2000);
 });
	$("input[name=floodnum]").focus(function() {
	$(".nfloodnum").show(2000);
 });
 $("input[name=floodnum]").blur(function() {
 $(".nfloodnum").hide(2000);
 });
 
 $("input[name=floodnum]").numeric();
});
$(document).ready(function() {
	
	$('div.sekmeAlani ul.sekmeler li a').click(function(){	
		$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');									   	
		var mevcutSinif = this.className.slice(0,2);	
		$('div.sekmeAlani > div').hide().filter('div.'+mevcutSinif).show();	
		$('div.'+mevcutSinif).css("background-color","#e0e2de");
	});
	$('.sekmeAlani ul.sekmeler li...