JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="smgm">
  <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/gvl-gkl-dsp/" title="ГВЛ, ГКЛ"><i class="icon-test"></i>ГВЛ, ГКЛ</a></li>

  <li>
    <a href="/katalog-tovarov/stroitelnye-materialy/" title="Строительные материалы"><i class="icon-test"></i>Строительные материалы <i class="icon-smgmr"></i></a>

    <div class="podm allpod">
      <ul class="podm1">
        <li>
          <a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/" title="Строительство стен и перегородок">Строительство стен и перегородок</a>
          <ul>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/gvl-gkl-dsp/" title="ГВЛ, ГКЛ">ГВЛ, ГКЛ</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/profil/" title="Профиль стеновой">Профиль стеновой</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/kirpich/" title="Кирпич">Кирпич</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/bloki-stenovye-peregorodochnye/" title="Блоки строительные">Блоки строительные</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/stroitelstvo-sten-i-peregorodok/gabiony/" title="Габионы">Габионы</a></li>
          </ul>
        </li>

        <li>
          <a href="/katalog-tovarov/stroitelnye-materialy/asbocementnye-izdeliya/" title="Асбоцементные изделия">Асбоцементные изделия</a>
          <ul>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/asbocementnye-izdeliya/shifer/" title="Шифер">Шифер</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/asbocementnye-izdeliya/mufta-asbocementnaya/" title="Муфта асбоцементная">Муфта асбоцементная</a></li>
            <li><a href="/katalog-tovarov/stroitelnye-materialy/asbocementnye-izdeliya/truby-asbocementnye/" title="Трубы асбоцементные">Трубы...

CSS

.smgm {
    width: 300px;
  background: #ddd;
    position:relative;
    z-index:9998;
    -webkit-transition:-webkit-box-shadow .5s ease;
    transition:-webkit-box-shadow .5s ease;
    transition:box-shadow .5s ease;
    transition:box-shadow .5s ease, -webkit-box-shadow .5s ease;
    transition:box-shadow .5s ease,-webkit-box-shadow .5s ease;
}
.smgm:hover {
    -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.5);
    box-shadow:0 0 0 9999px rgba(0,0,0,.5);
}
.smgm li {
    font-size:13px;
    font-weight:400;
    display:block;
    position: relative;
}
.smgm li a {
    border-bottom:1px solid #F4F4F4;
    color:#000;
    background:#ddd;
    line-height:15px;
    font-weight:400;
    padding:15px 30px 15px 30px;
    min-height: 20px;
    max-height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.smgm li a:hover{
  background: #00441C;
  color: #fff
}
.smgm li > div {
    position:absolute;
    z-index:9000;
    top:100%;
    left:-9999px;
    opacity:0;
  	-webkit-transition-delay: 300ms;
  	transition-delay: 300ms;
    border-left: 5px solid #005823;
}
.smgm li:hover > div {
    top:0;
    left:300px;
    opacity:1;
    background:#fff;
    padding:20px;
    min-width:800px;
    min-height:300px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
}
.allpod > ul{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 -10px -20px;
}
.podm1 > li {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(33.333333% - 20px);
  flex: 0 0 calc(33.333333% - 20px);
  margin: 0 0 10px 20px;
}
.podm ul li a {
  display:block;
    color:#000;
    font-size:13px;
    margin:0;
   padding:5px 0 5px 0;
    line-height:15px;
    min-height: 10px;
    max-height: 100px;
    border:none;
    font-weight:600;
   ...