JSFiddle - React, Tailwind, and code Playground

by mhrabiee

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<nav class="navigation-menu">
  <ul class="menu__list list-unstyled">
    <li class="menu__item active">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-tachometer-alt"></i>
        </div>
        <div class="menu__title">Main Dashboard</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-user"></i>
        </div>
        <div class="menu__title">Profile</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-bell"></i>
        </div>
        <div class="menu__title">Finances</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-calendar"></i>
        </div>
        <div class="menu__title">Titles</div>
      </a>
    </li>
  </ul>
</nav>

CSS

.menu__item {
  width: 250px;
  height: 50px;
  text-align: left;
}

.menu__item.active {
  background-color: #e9ebfd;
}

.menu__item.active .menu__icon {
  background-color: #e9ebfd;
  border-left: 4px solid #2c39ec;
}

.menu__item.active .menu__title {
  background-color: #e9ebfd;
}

.menu__item a:hover {
  text-decoration: none;
}

.menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fafafa;
  color: #2c39ec;
}

.menu__title {
  display: inline-block;
  padding-left: 20px;
  color: #777777;
}