JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul class="nav navbar-sidenav">
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="index.html">
            <i class="fas fa-tachometer-alt margin-r"></i>
            <span>Dashboard</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="users.html">
            <i class="fas fa-users margin-r"></i>
            <span>Users</span>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="fatura.html">
            <i class="fas fa-euro-sign margin-r"></i>
            <span>Fatura</span>
        </a>
    </li>
</ul>

CSS

.navbar-sidenav {
    position: relative;
    left: 0;
    flex-direction: column;
    margin-top: 75px;
    width: 200px;
    margin-left: 28px;
    background-color: #f1f1f1;
}

/* only applies is screen size is less then 768px wide */
@media (max-width: 768px) {

    .navbar-sidenav {
        width: 46px;
    }

    .navbar-sidenav .nav-link > span {
        display: none;
    }
    
    .navbar-sidenav:hover {
        width: 200px;
    }
    
    .navbar-sidenav:hover .nav-link > span {
        display: inline-block;
    }
  
}