JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
    <title>1ый копипастный сайт</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="styles1.css" id="styles" />    



    
</head>
<body>        


    <div  style="width: 1000px; height:100px; position: relative; margin-left: auto; margin-right: auto; margin-top:60px; border:5px solid black; background: url('/mysite/images/bg_header.png') center top repeat-x;">                
            
            <div style="border:5px solid black;  left:50%;"> 
            <div class="menuT">
                <ul >
                    <li>
                        <a href="index.html">О нас</a>
                    </li>
                    
                    <li>
                        <a href="folio.html">Портфолио</a>
                    </li>

                    <li>
                        <a href="uslugi.html">Услуги</a>
                    </li>

                    <li>
                        <a href="contacts.html">Контакты</a>
                    </li>                    
                </ul>
            </div>
            </div>
    </div>        
        
       
</body>
</html>

CSS

/*
INFO:
project: BREND master
browsers: opera/chrome/FF/ie7+/safari
resolutions: >=1024x768

TABLE OF CONTENTS:
1.global reset and common settings
2.layout
3.blocks
*/

/************************************************************************************************************** 1.global reset and common settings */

html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, li, span, fieldset , form, dl, dd, dt{ 
    border: none;
    margin: 0; 
    outline: none;
    padding: 0;
}

html{
    height: 100%;    
}

body{    
    height: 100%;            
}    

ul{
    list-style-type: none;
}

.clear{
    clear: both;
}    

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
    resize: none;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

h1{
    position: absolute;
    top: -4px;    
    left: -2px;
}

@font-face {
    font-family: 'FUTURIS';
    src: url('../fonts/FUTURIS.TTF');
}

@font-face {
    font-family: 'Candara';
    src: url('../fonts/Candarai.ttf');
}

    

    .menuT ul{
        overflow: hidden;
        background: url('/mysite/images/bg_menuT.png') left top no-repeat;
        padding-left: 30px;
        height: 85px;
        
    }
    
        .menuT li{
            
            /* background: url('../images/btn_menuT_L.png') left top no-repeat; */
            padding-left: 12px;
            margin-left: 27px;
            margin-top: 24px;
            margin-right: 5px;
            border-color: #CCC;
                    border-radius:20px;
                    border-width:2px;
                    border-style:solid;
        }
        
            .menuT ul li a{
                /* background: url('../images/btn_menuT_R.png') right top no-repeat; */
                display: block;
                height: 35px;
                padding-right: 12px;
                text-decoration: none;
               ...