JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-stack"> 
  <!-- six --> 
  <li aria-haspopup="true"> 
  <a href="#">Блок 6</a> 
  <div class="grid-container12"> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  </div> 
  </li> 
  <!--/ six --> 
   
  <!-- five --> 
  <li aria-haspopup="true"> 
  <a href="#">Блок 5</a> 
  <div class="grid-container10"> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column grid-column2"> 
  <ul> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  <li><a href="#">Тестовый элемент</a></li> 
  </ul> 
  </div> 
  <div class="grid-column...

CSS

/**/ 
  .sky-mega-menu, .sky-mega-menu * { 
  margin: 0; 
  padding: 0; 
  outline: none; 
  border: 0; 
  background: none; 
} 
/* level 1 */ 

/**/ 
  .sky-mega-menu { 
  position: relative; 
  z-index: 999; 
  background: rgba(255, 255, 255, 0.9); 
  box-shadow: 0 0 20px rgba(0, 0, 0, .3); 
  font-size: 0; 
  line-height: 0; 
  text-align: right; 
} 
.sky-mega-menu:after { 
  content:''; 
  display: table; 
  clear: both; 
} 
.sky-mega-menu li { 
  position: relative; 
  display: inline-block; 
  float: left; 
  padding: 5px; 
  border-style: solid; 
  border-color: rgba(0, 0, 0, .1); 
  border-right-width: 1px; 
  font-size: 13px; 
  line-height: 45px; 
  text-align: left; 
  white-space: nowrap; 
} 
.sky-mega-menu li a { 
  display: block; 
  padding: 0 20px; 
  text-decoration: none; 
  color: #666; 
  transition: background 0.4s, color 0.4s; 
  -o-transition: background 0.4s, color 0.4s; 
  -ms-transition: background 0.4s, color 0.4s; 
  -moz-transition: background 0.4s, color 0.4s; 
  -webkit-transition: background 0.4s, color 0.4s; 
} 
.sky-mega-menu li > div { 
  position: absolute; 
  z-index: 1000; 
  top: 100%; 
  left: -9999px; 
  margin-top: 8px; 
  background: rgba(255, 255, 255, 0.9); 
  box-shadow: 0 0 8px rgba(0, 0, 0, .3); 
  opacity: 0; 
  -o-transform-origin: 0% 0%; 
  -ms-transform-origin: 0% 0%; 
  -moz-transform-origin: 0% 0%; 
  -webkit-transform-origin: 0% 0%; 
  -o-transition: -o-transform 0.4s, opacity 0.4s; 
  -ms-transition: -ms-transform 0.4s, opacity 0.4s; 
  -moz-transition: -moz-transform 0.4s, opacity 0.4s; 
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; 
} 
.sky-mega-menu li > div:after { 
  content:''; 
  position: absolute; 
  bottom: 100%; 
  left: 0; 
  width: 100%; 
  height: 8px; 
  background: transparent; 
} 
.sky-mega-menu li > div:before { 
  content:''; 
  position: absolute; 
  bottom: 100%; 
  left: 24px; 
  border-right: 5px solid transparent; 
  border-bottom: 5px solid rgba(255, 255, 255, 0.9); 
 ...