JSFiddle - React, Tailwind, and code Playground

by jeysinghanbu

HTML

<div id="magik-verticalmenu" class="block magik-verticalmenu" style="width:50%">
   <div class="nav-title"> <span> Categories</span> </div>
   <div class="nav-content">
      <div class="navbar navbar-inverse">
         <div id="verticalmenu" class="verticalmenu" role="navigation">
            <div class="navbar">
               <div class="collapse navbar-collapse navbar-ex1-collapse" id="categories">
                  <ul class="nav navbar-nav verticalmenu">
                     <li class=" parent dropdown ">
                        <a href="/Article/Overview/127">
                           <div class="row">
                              <div class="col-md-10 col-lg-10"><span class="menu-title OverflowText ">Products</span></div>
                           </div>
                        </a>
                        <div id="sub-menu" class="dropdown-menu" style="width: 680px;height: 390px;overflow-x:hidden;overflow-y:auto;">
                           <div class="dropdown-menu-inner" style="">
                              <div class="row">
                                 <div class="mega-col col-sm-66" data-widgets="wid-5" data-colwidth="6">
                                    <div class="mega-col-inner">
                                       <div class="ves-widget">
                                          <div class="menu-title"><a href="/Article/Overview/128"><span class="SubmenuTitle">Floors</span></a></div>
                                          <div class="widget-html">
                                             <div class="widget-inner">
                                                <ul>
                                                   <li><a href="/Article/Overview/133">Cleaners</a></li>
                                                   <li><a href="/Article/Overview/134">Strippers</a></li>
                                                   <li><a href="/Article/Overview/135">Problem solvers</a></li>
                                      ...

CSS

#magik-verticalmenu .verticalmenu.navbar-nav > li.dropdown:hover .dropdown-menu{
    display: block;
    opacity: 1;
    left: 100%;
    top: 0;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
}


.widget-inner ul {
    padding-left: 20px;
}

    .widget-inner ul li:hover {
        padding-left: 20px;
    }

    .widget-inner ul li:before {
        content: '\f0da'; /* FontAwesome char code inside the '' */
        font-family: FontAwesome; /* FontAwesome or whatever */
        display: inline-block;
        width: 1.2em; /* same as padding-left set on li */
        margin-left: -1.2em; /* same as padding-left set on li */
    }

​ #magik-verticalmenu .verticalmenu .dropdown-menu {
    visibility: visible;
    display: block;
}

#magik-slideshow .col-lg-6 {
    padding-right: 0;
    padding-left: 0px;
}

#magik-slideshow {
    border: none;
    padding: 0;
    height: 390px !important;
    margin: 22px auto;
}

    #magik-slideshow .RHS-banner .add {
        margin-bottom: 20px;
        position: relative;
    }

        #magik-slideshow .RHS-banner .add a:before {
            overflow: hidden;
            position: absolute;
            top: 0;
            content: "";
            z-index: 100;
            width: 100%;
            height: 100%;
            left: 0;
            opacity: 0;
            transition: all 0.3s ease 0s;
            transform: scale(0.5) rotateY(180deg);
            background-image: url(../../images/plus-img.png);
            background-repeat: no-repeat;
            background-position: center;
            background-color: #666;
        }

        #magik-slideshow .RHS-banner .add a:hover::before {
            visibility: visible;
            opacity: 0.6;
            transform: scale(1) rotateY(0deg);
        }

.rev_slider_wrapper {
    position: relative;
}

    .rev_slider_wrapper > ul {
        visibility: hidden;
    }

.rev_slider {
    position: relative;
    overflow:...