JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cochanger.eu/media/system/css/joomla-fontawesome.min.css?91205db849bc0328e9fafe77e28f8504">
<link rel="stylesheet" href="https://cochanger.eu/media/templates/site/cassiopeia/css/global/colors_standard.min.css?91205db849bc0328e9fafe77e28f8504">
<link rel="stylesheet" href="https://cochanger.eu/media/templates/site/cassiopeia/css/global/fonts-local_roboto.min.css?91205db849bc0328e9fafe77e28f8504">
<link rel="stylesheet" href="https://cochanger.eu/media/templates/site/cassiopeia/css/template.min.css?91205db849bc0328e9fafe77e28f8504">
<link rel="stylesheet" href="https://cochanger.eu/media/templates/site/cassiopeia_cochanger/css/user.css?91205db849bc0328e9fafe77e28f8504">
<link rel="stylesheet" href="https://cochanger.eu/media/templates/site/cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.min.css?0.2.0">
<link rel="stylesheet" href="https://cochanger.eu//media/templates/site/cassiopeia_cochanger/css/cochanger-cat-art.css">
<script src="https://cochanger.eu/media/mod_menu/js/menu-es5.min.js?91205db849bc0328e9fafe77e28f8504"></script>
<script src="https://cochanger.eu/media/system/js/core.min.js?17121a112ecec3d656efe5c5f493429c9acf2179"></script>
<script src="https://cochanger.eu/media/templates/site/cassiopeia/js/template.min.js?91205db849bc0328e9fafe77e28f8504"></script>
<header class="header container-header full-width position-sticky sticky-top">
  <div class="grid-child container-nav">
    <nav class="moduletable " aria-label="Menu principal">

      <nav class="navbar navbar-expand-md" aria-label="Menu principal">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Permuter la navigation">
          <span class="icon-menu" aria-hidden="true"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar1">
          <ul class="mod-menu mod-list nav ">
            <li...

CSS

#navbar1 .nav-item {
  padding: 10px;
}
#navbar1 .nav-item:before,
#navbar1 .nav-item:after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #e60023;
}
#navbar1 .nav-item:before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}
#navbar1 .nav-item:after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}
#navbar1 .nav-item:hover:before,
#navbar1 .nav-item:hover:after {
  transform: scale(1, 1);
}
#navbar1 .nav-item:hover:after {
  background: transparent;
}