JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <header>
    <button onClick="alert('La modale se ferme !')">X</button>
  </header>
  <p>
    Ceci est une modale à fermer avec une petite zone clickable
  </p>
</div>

<div>
  <header>
    <button class="wgac-size" onClick="alert('La modale se ferme !')">X</button>
  </header>
  <p>
    Ceci est une modale à fermer avec une zone clickable conforme au WGAC
  </p>
</div>

CSS

div {
  border: 2px solid;
  width: 300px;
  height: 120px;
  margin: 10px;
}

header {
  display: flex;
  flex-direction: row-reverse;
  background-color: #EEEEEE;
  height: 44px;
}

button {
  border: none;
  background-color: none;
  cursor: pointer;
  margin: 16px;
  padding: 0;
}

.wgac-size {
  width: 44px;
  height: 44px;
  margin: 0;
}

p {
  margin: 10px;
}