JSFiddle - React, Tailwind, and code Playground

by Mikhail miha8722

HTML

<ul class="meny">
   <li class="html"><a href="http://address post">Курс HTML</a>
    <ul> 
     <li><a href="http://address post">Урок 1</a></li> 
     <li><a href="http://address post">Урок 2</a></li>   
     <li><a href="http://address post">Урок 3</a></li>   
     <li><a href="http://address post">Урок 4</a></li>  
    </ul> 
   </li>
    
   <li class="css"><a href="http://address post">Курс CSS</a>
    <ul> 
     <li><a href="http://address post">Урок 1</a></li> 
     <li><a href="http://address post">Урок 2</a></li>   
     <li><a href="http://address post">Урок 3</a></li>   
     <li><a href="http://address post">Урок 4</a></li>  
    </ul> 
   </li>
     
   <li class="php"><a href="http://address post">Курс PHP</a> 
    <ul> 
     <li><a href="http://address post">Урок 1</a></li> 
     <li><a href="http://address post">Урок 2</a></li>   
     <li><a href="http://address post">Урок 3</a></li>   
     <li><a href="http://address post">Урок 4</a></li>  
    </ul> 
   </li>
  
   <li class="js"><a href="http://address post">Курс Java Script</a>
    <ul> 
     <li><a href="http://address post">Урок 1</a></li> 
     <li><a href="http://address post">Урок 2</a></li>   
     <li><a href="http://address post">Урок 3</a></li>   
     <li><a href="http://address post">Урок 4</a></li>  
    </ul> 
   </li>
  </ul>

CSS

.meny{             /*Общий блок*/
    background: #fdeaa8;     /*Фон общего блока*/
    padding: 2px;     /*Отступ от пунктов меню*/
    border-radius: 5px;     /*Закруглённые углы*/
    box-shadow: 0px 0px 0px 2px #0ea8f4;     /*Рамка общего блока*/
    width: 785px;     /*Ширина*/
    height: 35px;     /*Высота*/
    }
  .html, .css, .php, .js{         /*Пункты меню - размещение*/
    float: left;     /*Размещаем горизонтально*/
    margin: 3px 3px 3px 3px;     /*Отступ между пунктами*/
    width: 190px;     /*Ширина пунктов*/
    }
  ul {             /*Пункты подменю*/
    width: 190px;     /*Ширина пунктов подменю*/
    list-style: none;     /*Убираем маркеры*/
    padding: 0;     /*Поля вокруг текста*/
    margin: 0 0 0 0;     /*Отступы вокруг подменю*/
    font-family: Arial, sans-serif;     /*Шрифт текста в меню*/
    font-size: 16px;     /*Размер текста в меню*/
    text-align: center;     /*Текст по центру*/
    }
  li ul {             /*Размещаем подменю*/
    position: absolute;     /*Подменю позиционируются абсолютно*/
    display: none;     /*Скрываем подменю*/
    margin-left: 0px;     /*Сдвиг подменю вправо или влево*/
    margin-top: 0px;     /*Сдвиг подменю вверх или вниз*/
    }
  li a {              /*Ссылка в подменю*/ 
    display: block;     /*Ссылка*/
    padding: 5px;     /*Поля вокруг текста*/
    text-decoration: none;     /*Убираем подчеркивание*/
    color: #666;     /*Цвет текста*/
    border-radius: 5px;    /*Закруглённые углы пунктов меню*/
    box-shadow: 0px 0px 0px 2px #0ea8f4;     /*Рамка пунктов меню*/
    background: #7df9ff;     /*Фон для старых браузеров*/
    background: -moz-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);     /*Переходящий фон (градиент) пунктов меню*/
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7df9ff), color-stop(100%,#FBFFFF)); 
            background: -webkit-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
           ...