JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">

<!DOCTYPE html>
<html>
    <head>
        <!-- Our Custom CSS -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/dashboard.css' %}">
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
        
    </head>
    <body>
        <div class="wrapper">
            <!-- Sidebar  -->
            <nav id="sidebar">
                <div class="sidebar-header">
                    <div class="row">
                        <div class="col-6">
                            <svg id="logoSvg" width="218" height="84" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <title>Layer 1</title>
                                    <text transform="matrix(1 0 0 1 0 0)" xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_1" y="49.75" x="39.32813" stroke-width="0" stroke="#000" fill="#fce15a">SOME LOGO</text>
                                </g>
                            </svg>
  ...

CSS

body {
    background: #fafafa;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.userInitials {
  height: 38px; /* increase height */
  flex-shrink:0; /* add property, value 0 so no srhink */
  display:flex;align-items:center;justify-content:center; /*center the initials */
  width: 38px; /* increase width */
  text-align: center;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: white;
  color: #193D4C;
}

.staff-nav-holder {
  align-items: flex-start !important;
  justify-content: space-between;
  width: 100%;
}

.staff-nav-holder > div:first-of-type {
  width: 100%
}

.staff-position {
  font-weight: normal;
}

.d-flex {
  display: flex
}

.text {
  flex-direction: column;
  margin-left: 8px;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #193D4C !important;
    border-color: #193D4C !important;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #193D4C;
    color: #fff;
    transition: all 0.5s ease;
}

#sidebar.active {
    min-width: 80px;
    max-width: 80px;
}

.sidebar-item{
    font-weight: 200;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .staff-position,
#sidebar.active .staff-name,
#sidebar.active #profile-chevron-down,
#sidebar.active .sidebar-item,
#sidebar.active .sidebar-language,
#sidebar.active .sidebar-header #logoSvg {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

.userInitials{
    font-weight: 800;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #193D4C;
}

.sidebar-header .row>*{
    padding-right: 0;
    padding-left: 0;
}

#sidebar...