JSFiddle - React, Tailwind, and code Playground

by Jerome

HTML

<html>
  <head>
    <title>localhost</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
 <body>
 <nav class="vertical">
   <ul>
    <li style='width: 50px;'><a href="#"><i class="fa fa-bars fa-lg alert top-padding"></i></a>
      <ul>
          <li class='text-left' style='width: 250px;'><a href="#">one</a>
            <ul>
                  <li>
                      <a href="#1">1</a>
                  </li>
                  <li>
                      <a href="#2">2</a>
                  </li>
                  <li>
                      <a href="#3">3</a>
                  </li>
                  <li>
                      <a href="#4">4</a>
                  </li>
                  <li>
                      <a href="#5">5</a>
                  </li>
                  <li>
                      <a href="#6">6</a>
                  </li>
                  <li>
                      <a href="#7">7</a>
                  </li>
                  <li>
                      <a href="#8">8</a>
                  </li>
                  <li>
                      <a href="#9">9</a>
                  </li>
                  <li>
                      <a href="#">10</a>
                  </li>
                  <li>
                      <a href="#">11</a>
                  </li>
                  <li>
                      <a href="#">12</a>
                  </li>
                  <li>
                      <a href="#">13</a>
                  </li>
                  <li>
                      <a href="#">14</a>
                  </li>
                  <li>
                      <a href="#">15</a>
                  </li>
                  <li>
                      <a href="#">16</a>
                  </li>
                  <li>
                      <a href="#">17</a>
                  </li>
                  <li>
                      <a href="#">18</a>
                  </li>
                  <li>
                      <a...

CSS

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}