JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<!-- START: RUBY DEMO HEADER -->
<div class="ruby-menu-demo-header">
      <!-- ########################### -->
      <!-- START: RUBY HORIZONTAL MENU -->
      <div class="ruby-wrapper">
       
        <ul class="ruby-menu">
          

          <li class="ruby-menu-right"><a class="sideOpen" href="#">Right</a>
            <ul class="multi-menu">
              <li><a href="#">2nd Level #1</a></li>
              <li><a href="#">2nd Level #2</a></li>
              <li class="ruby-open-to-left"><a href="#">2nd Level #3</a>
                <ul>
                  <li class="ruby-open-to-left"><a href="#"><i class="fa fa-university" aria-hidden="true"></i>3rd Level #1</a>
                    <ul>
                      <li><a href="#">4th Level #1</a></li>
                      <li><a href="#">4th Level #2</a></li>
                    </ul>
                  <span class="ruby-dropdown-toggle"></span></li>
                  <li><a href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i>3rd Level #2</a></li>
                  <li><a href="#"><i class="fa fa-users" aria-hidden="true"></i>3rd Level #3</a>
                  </li><li><a href="#"><i class="fa fa-file" aria-hidden="true"></i>3rd Level #4</a>
                    <ul>
                      <li><a href="#"><i class="fa fa-paper-plane" aria-hidden="true"></i>4th Level #1</a></li>
                      <li><a href="#"><i class="fa fa-print" aria-hidden="true"></i>4th Level #2</a></li>
                      <li><a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i>4th Level #3</a></li>
                    </ul>
                  <span class="ruby-dropdown-toggle"></span></li>
                </ul>
              <span class="ruby-dropdown-toggle"></span></li>
              <li class="ruby-open-to-left"><a href="#">2nd Level #4</a>
                <ul>
                  <li><a href="#">3rd Level #1</a></li>
                  <li><a href="#">3rd Level #2</a></li>
                  <li><a href="#">3rd...

CSS

/* theme */

div.ruby-wrapper,div.ruby-wrapper.ruby-vertical {
    background: #f9f9f9;
    color: #222
}

ul.ruby-menu > li > a {
    color: #222
}


/* transision */

span.ruby-dropdown-toggle {
    transition: transform .3s ease
}

span.ruby-dropdown-toggle:after {
    transition: transform .3s ease
}


    ul.ruby-menu > li > a:after {
        transition:all .3s ease
    }

    ul.ruby-menu > li > ul > li > a:after,ul.ruby-menu > li > ul > li > ul > li > a:after,ul.ruby-menu > li > ul > li > ul > li > ul > li > a:after {
        transition: all .3s ease
    }

    ul.ruby-menu > li > ul,ul.ruby-menu > li > div {
        transform: translateY(25px);
        transition: all .3s ease
    }

    ul.ruby-menu > li:hover > ul,ul.ruby-menu > li:hover > div {
        transform: translateY(0)
    }

    ul.ruby-menu.ruby-vertical > li > ul,ul.ruby-menu.ruby-vertical > li > div {
        transform: translateX(25px);
        transition: all .3s ease
    }

    ul.ruby-menu.ruby-vertical > li:hover > ul,ul.ruby-menu.ruby-vertical > li:hover > div {
        transform: translateX(0)
    }

    ul.ruby-menu > li > ul > li > ul,ul.ruby-menu > li > ul > li > ul > li > ul,ul.ruby-menu > li > ul > li > ul > li > ul > li > ul {
        transform: translateX(25px);
        transition: all .3s ease
    }

    ul.ruby-menu > li > ul > li:hover > ul,ul.ruby-menu > li > ul > li > ul > li:hover > ul,ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > ul {
        transform: translateX(0)
    }

    ul.ruby-menu > li > ul > li.ruby-open-to-left > ul,ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul,ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left > ul {
        transform: translateX(-25px);
        transition: all .3s ease
    }

    ul.ruby-menu > li > ul > li.ruby-open-to-left:hover > ul,ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left:hover > ul,ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left:hover > ul {
        transform:...