JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container-sm">
  <div class="row">
    <div class="col">
      <img src="images/banniere.jpg" width=100% alt="Boischaut-Sud Radio" />
    </div>
  </div>
  <div class="row" style="border:0px;margin:0px;padding:0px;text-align: center;">
    <div class="c x">
      <div class="result-wrapper x">
        <div class="result">
          <nav class="skew-menu">
            <ul>
              <li><a href="#">Accueil</a></li>
              <li><a href="#">C'est dans le Boischaut-Sud</a></li>
              <li><a href="#">Programmes</a>
                <ul>
                  <li><a href="#">Accueil</a></li>
                  <li><a href="#">C'est dans le Boischaut-Sud</a></li>
                  <li><a href="#">Programmes</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Liens amis</a></li>
                </ul>
              </li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Liens amis</a></li>
            </ul>
          </nav>

        </div>
      </div>
    </div>
    <div class="col" style="border:0px;margin:0px;padding:0px"></div>
  </div>
</div>

CSS

.skew-menu{
  text-align: center;
  background: #ff6000;
  border-radius: 100% / 50%
}

.skew-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skew(-25deg);
}

.skew-menu ul li {
  background: #fff;
  float: left;
  border-right: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  text-transform: uppercase;
  color: #555;
  font-weight: bolder;
  transition: all 0.3s linear;
}
  
.skew-menu ul li:first-child {
	border-radius: 7px 0 0 7px;
}
  
.skew-menu ul li:last-child {
	border-right: none;
	border-radius: 0 7px 7px 0;
}
  
.skew-menu ul li:hover {
    background: #eee;
    color: #000;
}
  
.skew-menu ul li a {
    display: block;
    padding: 1em 2em;
    color: inherit;
    text-decoration: none;
    transform: skew(25deg);
}
.skew-menu ul ul {
  display:grid;
  position:absolute;
  visibility:hidden;
  transform: skew(25deg);
}
.skew-menu ul  li:hover ul  { 
  visibility:visible
}
.skew-menu ul ul li  {
  transform: skew(-25deg);
}
.skew-menu ul ul li a {
    transform: skew(25deg);
}