JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo">
<h1>Mes données personnelles</h1>
<button type="button">
  Menu +
</button>
</div>
<nav class="cmp-accountMenu" hidden>
    <ul class="cmp-accountMenu-list" data-text="menu">
        <li><a class="cmp-accountMenu-link" href="#">Mes commandes</a></li>
        <li><a class="cmp-accountMenu-link" href="#">Renvoyez un article</a></li>
        <li><a class="cmp-accountMenu-link" href="#">Mes moyens de paiement</a></li>
        <li class="is-active"><a class="cmp-accountMenu-link" href="#" aria-current="page">Mes données personnelles</a></li>
        <li><a class="cmp-accountMenu-link" href="#">Mes adresses</a></li>
        <li><a class="cmp-accountMenu-link" href="#">Préférences de contact</a></li>
        <li><a class="cmp-accountMenu-link" href="#">Aide et contact</a></li>
        <li><a href="#" class="cmp-accountMenu-logout cmp-link cmp-text small">Se déconnecter</a></li>
    </ul>
</nav>

CSS

.foo {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.is-active {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border:  0;
  height:  1px;
  width:   1px;
  overflow: hidden;
  clip: rect(1px  1px  1px  1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: .001;
}