JSFiddle - React, Tailwind, and code Playground

by Lucifer

HTML

<html>

<head><title>Game Portal</title>
<META HTTP-EQUIV="CONTENT-TYPE" LANG="RU" CONTENT="text/html;charset=utf-8">
<META HTTP-EQUIV="CONTENT-LANGUAGE" LANG="RU" CONTENT="RU">
<META HTTP-EQUIV="CACHE-CONTROL" LANG="RU" CONTENT="NO-STORE">
<META NAME="DESCRIPTION" LANG="RU" CONTENT="">
<META NAME="KEYWORDS" LANG="RU" CONTENT="GamesPortal,Call of duty,battlefield,COD,medal of honor">
<META NAME="DOCUMENT-STATE" LANG="RU" CONTENT="DYNAMIC">
<META NAME="ROBOTS" LANG="RU" CONTENT="ALL">
<META NAME="RESOURSE-TYPE" LANG="RU" CONTENT="DOCUMENT">
<META NAME="AUTHOR" LANG="RU" CONTENT="Гурьянов Илья;NIKName:Lucifer">
<link rel="stylesheet" type="text/css" href="CSS\glavniy.css">
   
</head>
    <BODY>
    <div id="userbar">
        
<form name="login" method="post" autocomplete="on">
    
    <label><span style="color:white;padding-left:5px;"/>E-m</span><span style="color:#1cbbbc;"/>ail:</span><input name="email" type="text"
    size="13" style="margin-left:13px;"></input></label>
    <label><span style="color:white;padding-left:5px;"/>Пар</span><span style="color:#1cbbbc;"/>оль:</span><input name="password" type="password" size="13"></input></label>
  <div style="position:inherit;padding-top:12px;padding-left:5px;margin-bottom:0;">
    <a href="/page/registration.cshtml" style=" margin:0; list-style:none; padding:0;color:white;top:40; text-decoration:none;">Регистрация</a></div>
</form>
     </div>
    <!--Элементы каркаса страницы-->
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"><span style="padding-left:330px;">[GP<span style="color:#1cbbbc;font-size:16pt;font-weight:Bold;"/>S</span>]<span style="color:#1cbbbc;font-size:16pt;font-weight:Bold;"/>-</span>GamesPortal<span style="color:#1cbbbc;font-size:16pt;font-weight:Bold;"/>support</span></div>
    <div class="top_images"></div>
    <!--Картинка по середине-->
        <div id="body_images"></div>
    <div id="path"><span style="color:white; padding-left:30px;...

CSS

BODY 
{
width:1200;
height:1200;
background-color:#353535;
margin:0;
font-family:Tahoma;
color:White;
}
h1 {color: green; font-size: 24pt;}
b {font-style: italic;}
a:link {color:navy;} 
a:visited {color:green;}
a:active {color:silver;}
a:hover {color:red;}
form
{
    margin:0;
    padding:0;
    border:0;
    
}
.top_images
{
    position:absolute;
    margin-left:151px;
    margin-top:-197px;
    background-image:url('/images/avatar_1.png');
    width:661;
    height:190;
    z-index:1;
}

.left
    {
    position:relative;
    margin-left:7.63%;
    float:left;
    width:40;
    height:1200;
    background-image:url(/images/clantemplate_02.png);
    }
.right 
    {
    position:relative;
    float:right;
    margin-right:7.63%;
    width:40;
    height:1200;
    background-image:url(/images/clantemplate_04.png);
    }
.top 
    {
    position:relative;
    margin:0 auto;
    width:937;
    height:239;
    background-image:url(/images/clantemplate.png);
    z-index:-1;
    color:white;  
    font-size:16pt;
    font-weight:Bold;
    }
.bottom
    {
    position:relative;
    margin:0 auto;
    top:881px;
    width:937;
    height:81;
    background-image:url(/images/clantemplate_07.png);
    }
    ul
    {
        list-style:none;
        margin:0;
        padding:0;
    }
.menu
{
    position:relative;
    float:left;
    top:-1;
    width:203;
    font-size:13pt;
    font-weight:Bold;
}
.menu li a
{
    height:29px;
    text-decoration:none;
    height:26px;
}
.menu li a:link,.menu li a:visited
{
    display:block;
    background:url('/images/menu3.png')  0 -27.999999999999999px;
    padding:4px 0 0 23px;
}
.menu li a:hover 
{
background:url('/images/menu3.png') ;
padding:4px 0 0 23px;
}
.menu li a:active
{
    background:url('/images/menu3.png') 0 -58px;
    padding: 4px 0 0 23px;
}

#body_images
{
position:absolute;
    background-image:url('/images/body.png');
    width:532;
    height:230;
    margin-left:334px;
   ...