JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"style="width:90%;margin:auto;margin-top: 0.5%">
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample06">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Acceuil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mon histoire</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">Ma technique</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">Mon blog</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">boutique</a>
      </li>
	   <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
	
	</ul>
	   <div class="droite"style="width:30%;float:right;">
    <span class="navbar-text"style="width:30%;margin-right: 2%;">
      <a href="https://www.google.fr" target="_blank">Inscription</a>
</span>
	<span class="navbar-text"style="width:30%;margin-right: 2%;margin-left:2%;">
      <a href="https://www.google.fr" target="_blank">Connection</a></span>
	  <span class="navbar-text"style="width:30%;margin-right: 2%">
      <a href="https://www.google.fr" target="_blank">Deconnexion</a>
    </span>
	</div>
  </div>
 
</nav>