JSFiddle - React, Tailwind, and code Playground

by jontsk

HTML

<body>
<!--  меню  -->
    	<div class="fst_line_menu posfix">

                <div id="soc-nav">
                    <a href="index.html"><img class="soc-but" src="images/vkbut.png" width="22" 
       height="22" alt=""></a>
                    <a href="index.html"><img class="soc-but" src="images/twbut.png" width="22" 
       height="22" alt=""></a>
                    <a href="index.html"><img class="soc-but" src="images/fbbut.png" width="22" 
       height="22" alt=""></a>
                    <a href="index.html"><img class="soc-but" src="images/gpbut.png" width="22" 
       height="22" alt=""></a>
                    <a href="index.html"><img class="soc-but" src="images/stbut.png" width="22" 
       height="22" alt=""></a>
                    <a href="index.html"><img class="soc-but" src="images/wgbut.png" width="22" 
       height="22" alt=""></a>
                </div> 
        	<ul id="user-links">
            	<li><input class="user_input" type="text" placeholder="пароль" name="password"></input></li>
                <li><input class="user_input" type="text" placeholder="лоигн" name="login"></input></li>
                <li><a href="./">Регистрация</a></li>
            	</ul>
           
        </div>
        <div class="bg_scnd_line_menu posfix">
        <div class="scnd_line_menu posrel">
        	<nav>
        	<a href="index.html"><img class="logo_menu" src="images/logo.gif" width="300" 
   height="58" alt="">
   			</a>
			<ul id="primary-nav">
				<li><a href="./">1я</a></li>
				<li><a href="./">1</a></li>
				<li><a href="./" class="dir">1</a>
                	<ul>
						<li><a href="./">1</a></li>
						<li><a href="./">1</a></li>
						<li><a href="./">1</a></li>
                        <li><a href="./">1</a></li>
                        <li><a href="./">1</a></li>
                        <li><a href="./">1</a></li>
					</ul>
                </li>
                <li><a href="./" class="dir">1</a>
                	<ul>
						<li><a...

CSS

body{background:#262626;}
.wrapall{margin:0 auto; width:1200px;background:#262626;height:100%;}
.posabsl{position:absolute;}
.posrel{position:relative;}
.posfix{position:fixed;}
.header-logo{ z-index:998;}
/*первая линия меню*/
.fst_line_menu{ width:100% ; min-width: 1000px; height: 28px;
background:none repeat scroll 0% 0% #262626; box-sizing: border-box;
z-index:999;margin-top:-8px; margin-left:-8px;overflow: hidden; border-top:1px solid #d78e1b; border-bottom:1px solid #000;}
ul#project-nav{float:left;display: inline-block;padding-right:5px;font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform: uppercase;}
ul#project-nav li a{color: #fff;text-decoration:none;}
div#soc-nav{float:left;display: inline-block;padding-right:5px;margin:2px 0px 0px 8px;}
.soc-but{opacity:0.6;}
.soc-but:hover{opacity:1;}

ul#user-links, ul#user-links .user_input{float:right;margin:0px 5px 0px 0px; font: normal 10px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform: uppercase; }
ul#user-links li {display: inline-block;padding:4px;float:right;}
ul#user-links li a{color: #fff;text-decoration:none;float:right; padding-top:2px;}
.user_input{height:12px;}

ul.dir-project{padding:2px;float:right;}
ul.dir-project  li:hover {color:#c48e2c; text-decoration: none;background-color:#2e2e2e;}
ul.dir-project li ul {width: 70px;background:#333;color: #fff;font-size: 11px;text-transform: none;}








/*вторая линия меню*/
.bg_scnd_line_menu{width:100%;height:58px;background:#1E1E1E;border-top:1px solid #000; border-bottom:1px solid #000;margin-top:20px; margin-left:-8px;z-index:999;}
.scnd_line_menu{width:1200px; height:59px;background:#1E1E1E;
z-index:99999;margin:-1px auto;border-bottom:1px solid #000;display:block;}
.logo_menu{border-left:1px dashed #c48e2c;border-right:1px dashed #c48e2c;float: left;}




/*меню*/
ul#primary-nav {font: normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform: uppercase;}
ul#primary-nav  li {padding: 7px...