JSFiddle - React, Tailwind, and code Playground

by vctls

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>APP TITLE</title>
    <style>
      /**
        FIXME This is the only way I found of completely removing Bootstrap container padding.
         Overflow:hidden is required in order to prevent any horizontal scrolling.
         But when userd along sticky elements and some animations or JS DOM manipulations,
         it makes unwanted space appear between the sticky elements and the container.
         Other overflow values also cause problems.
         */
      #main-container {
        padding: 0;
        overflow-x: hidden;
      }

    </style>
  </head>

  <body>
    <input id="menu-sticky-box" class="sticky-box" type="checkbox">
    <label id="menu-sticky-box-label" class="sticky-box-label stickable" for="menu-sticky-box" title="Pin menu" role="checkbox">
      <i class="fas fa-thumbtack"></i>
    </label>
    <div id="barre-utilisateur" class="stickable">
      <div class="profil">User name</div>
    </div>
    <div class="site-header bandeau-gris bandeau-menu-avec">
      <div class="appli-bloc">
        <div class="appli-nom d-none d-lg-block">APP NAME</div>
      </div>
    </div>
    <div id="menu-wrapper" class="stickable">
      <div id="menu">
        <ul class="menu-haut">
          <li class="first"><a href="#" class="aposition">
              <div class="position">
                <div class="position-1">
                  <span class="fas fa-home"></span></div>
                <div class="position-1-in">
                  <span class="fas fa-home"></span></div>
                <div class="position-2">
                  <span class="menu-label">Home</span>
               ...

CSS

.overflowing {
  height: 1500px;
  background: linear-gradient(0deg, rgb(128, 128, 128) 0%, rgb(255, 255, 255) 100%);
  font-size: 4em;
}

.small-box {
  border-radius: 0.25rem;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  display: block;
  margin-bottom: 20px;
  position: relative;
}

.small-box .icon {
  color: rgba(0, 0, 0, 0.15);
  z-index: 0;
}

.small-box .icon>i {
  font-size: 90px;
  transition: all 0.3s linear;
}

.small-box .icon>i.fa {
  font-size: 100px;
  top: 20px;
}

.small-box:hover .icon>i {
  font-size: 95px;
}

.small-box:hover .icon>i.fa {
  font-size: 75px;
}

body {
  font-size: 12px;
  font-family: sans-serif;
  background: red;
}

.site-header {
  height: 71px;
  background-size: cover;
  position: relative;
}


.site-footer a {
  color: #fff;
  margin-left: 15px;
}

.bandeau-gris {
  background: lightgrey;
}


/************
 *
 *    MENU
 *
 ************/
#menu {
  z-index: 1000;
  height: inherit;
}

#menu ul {
  margin-top: -1px;
  z-index: 1001;
}

.menu-haut>li {
  float: left;
}

#menu li {
  list-style: none;
  height: 29px;
  cursor: default;
  margin: auto;
  box-shadow: 1px 0 0 0 #888,
    0 1px 0 0 #888,
    1px 1px 0 0 #888,
    1px 0 0 0 #888 inset,
    0 1px 0 0 #888 inset;
}

#menu li a {
  display: block;
  color: #585858;
  text-decoration: none;
}

#menu ul li ul {
  display: none;
}

#menu li:hover ul,
#menu .toggle-box:checked~ul {
  display: block;
}

#menu li ul {
  padding: 0;
}

#menu .menu-haut {
  height: inherit;
  padding: 0;
}

.aposition {
  height: inherit;
}

.position {
  color: #585858;
  height: inherit;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: unset;
}

.position:hover .position-1,
.toggle-box:checked~.position .position-1 {
  display: none;
}

.position:hover .position-1-in,
.toggle-box:checked~.position .position-1-in {
  display: flex;
  align-items: center;
  justify-content: center;
}

#menu li:hover {
  background-color: #a4a4a4;
 ...