JSFiddle - React, Tailwind, and code Playground

by Sean

HTML

<div class="menu">
      <div class="hamburger-container">
        <div class="hamburger">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
      <ul class="links">
        <li class="home">
          <div id="home" class="menu-icon-container">
            <img class="menu-icon" src="/images/home-icon.png" />
          </div>
          <span>Home</span>
        </li>
        <li class="assignments">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/assignments-icon.png" />
          </div>
          <span>Assignments</span>
        </li>
        <li class="proctoring">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/proctoring-icon.png" />
          </div>
          <span>Proctoring</span>
        </li>
        <li class="reports">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/reports-icon.png" />
          </div>
          <span>Reports</span>
        </li>
        <li class="administration">
          <div class="menu-icon-container">
            <img class="menu-icon" src="/images/administration-icon.png" />
          </div>
          <span>Administration</span>
        </li>
      </ul>
    </div>

CSS

.menu {
    background: #1481C3;
    color: white;
    border-right: 1px solid #666666;
}

.menu ul.links {
    list-style: none;
    padding: 0;
}

.menu ul.links li {
    border-bottom: 1px solid #0E99ED;
    height: 64px;
    line-height: 67px;
    padding: 0 25px;
    font-size: 15px;
    /*transition: background-color 0.5s ease;*/
    background: linear-gradient(45deg, #0E99ED 50%, #1481C3 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    /*margin-left:10px;*/
    transition: all 0.2s ease;
}

.menu ul.links li:hover {
    /*background-color: #0E99ED;*/
    /*background-position:right bottom;*/
    background-position: left bottom;
    cursor: pointer;
}