JSFiddle - React, Tailwind, and code Playground

by Ivanq

HTML

</head> 
       <body>
          <div class="page_align">
           <div class="header">
               <div> <a class="header_logo" href="#">Epixx</a></div> 
               <div class="descript">Обучение Интернет-технологиям</div>         
                    <ul class="menu">
                 <li class="opened">
                     <a href="#" class="home">Главное</a>
                      <ul class="sub-menu">
                         <li><a href="#">Meet the Team</a></li>
                         <li><a href="#">Pricing Tables</a></li>
                         <li><a href="#">Gallery Page</a></li>
                         <li><a href="#">Portfolio 3 Column</a></li> 
                         <li><a href="#">Portfolio 4 Column</a></li>                  
                         <li><a href="#">Full Width</a></li>
                         <li><a href="#">Archives</a></li>
                         <li><a href="#">Contact form</a></li>
                       </ul>
                </li>
                 <li ><a href="#" class="first">Вопросы</a></li>
                 <li ><a href="#" class="second">Программы</a></li>
                 <li ><a href="#" class="third">Отчеты</a></li>
                 <li ><a href="#" class="fourth">История</a></li>
                 <li ><a href="#" class="last">Контакты</a></li>
                 </ul>
                    </div>  
               </div>  
          
        <div class="content">
             <h3>Пожалуй, самый эффективный и быстрый способ научиться цифровым языкам.</h3>
             <h4 span class="description"> Если вы хотите делать карьеру в верстке и веб-дизайне и находитесь на самом старте - обязательно <span class="part_description">записывайтесь в ближайший поток. Это - самый <span class="descript2">короткий и эффективный путь из всех возможных</span></span></h4>
              </div>
       </body>

CSS

* {
margin:0; 
padding 0 ; 
outline: none;    
}

html {
    height: 100%; 
}

body {
    
    background-image: url(../img/pg.jpg);
    background-size: cover;
    font: 17px Arial, Tahoma, sans-serif;
    font-weight: bold;
    margin: 0; 
    
}

.page_align {
    width:940px;
    margin: 0 auto; 
    
}

.header { 
    width: 940px;
    height: 30px; 
    /*float: left;
    clear: both;*/
    margin: 40px auto; 
   /* outline: 1px solid pink; */
    box-sizing: outline;
    margin-right: 100px;
    
}

.header_logo {
    height: 30px;
    font-size: 34px;
    font-family: sans-serif;
    font-style: bold;
    color: #f1eee5; 
    position: relative;
    left: -6px;
    top: 1px;
    text-shadow: 0 1px 3px #000000;
    background: -webkit-gradient(linear, left bottom,left top,color-stop(0.2, #336),color-stop(1, #FFF));
    -webkit-background-clip: text;
    margin: 3px;
    margin-left:2px;
    
 
}

.descript {
    width:auto;
    height: 30px;
    color:#8b8d91;
    font-size: 11px;
    font-style: italic;
    font-weight: normal;
    font-family: Georgia, serif;
    position: relative;
    margin-top: 45px;
    margin-left: 116px;
    right: 1px;
    bottom: 79px;
    line-height: 34px;  
    
}

 .menu {
    height: 30px;
    padding: 0;
    margin: 0; 
    list-style: none;
}

a {
    text-decoration: none;
}

.menu > li{
    float:left;
    display: inline-block;
    position: relative;
    left: 380px;
    bottom:109px;
}

/* псевдоселектор не срабатывает
.header_nav ul li:last-child{
    list-style: none;
    padding-right: 5px;

}
/*псевдоселектор не срабатывает
.header_nav ul li:nth-child(5) {
    position: relative;
}*/

.menu li a {
    display: block;
    line-height: 30px;
    /*padding:0 23px;*/
    border-radius: 3px;
    font-size: 13px; 
    color:#f1eee5;  
    font-size: 13px;
    font-style: bold;
    font-family: ;
    margin: ;
    
         
}

.menu a:hover {
    background: #1b1b1b;
    

}

li {
     padding: 0 23px;
}


.home {
   ...