JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="position-sticky pt-3">
        

        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link align-items-center active d-flex" aria-current="page" href="#">
              <span data-feather="home"></span>
              <span data-feather="home"></span>
              <span class="userInitials">JW</span>
              <div class="d-flex align-items-center">
               <div class="flex-fill">
                <span class="d-block">John Walker</span>
                <span class="staff-position d-block">PM</span>
               </div>
                <i id="profile-chevron-down" class="bi bi-chevron-down"></i>
              </div>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <span data-feather="file"></span>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
  <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
  <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>&nbsp;&nbsp;Projects
            </a>
          </li>
          <li...

CSS

body {
  font-size: .875rem;
  background-color: #DBDBDB;
}

.alert-custom {
  color: #193D4C !important;
  background-color: #F3E4A8 !important;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

input[type="password"].form-control::-webkit-input-placeholder {
  font-size:small;
}

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

#toDoHeader {
  background-color: #F3E4A8 !important;
}

#toDoListBadge {
  color: #193D4C !important;
  font-size: small;
}

#otherHeaders {
  background-color: #193D4C !important;
}

.userInitials {
  height: 32px;
  width: 32px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: white;
  color: #193D4C;
  padding-top: 5px;
}

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

.d-flex {
  display: flex
}

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

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  color: #FFFFFF;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
  font-weight: 800;
}

.sidebar .nav-link.active {
  font-weight: 800;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

#sidebarMenu {
  background-color: #193D4C !important;
}

.cardItem {
  background-color: #F4F4F4 !important;
 ...