JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>


<body>
 
<!-- https://codepen.io/adamaoc/pen/KguLA -->
 <div class="button-area">
  
<a class="cta-1" href="https://link1.com" >Link 1</a>
<a class="cta-2" href="https://link2.com" >Link 2</a>
<a class="cta-3" href="https://link3.com" >Link 3</a>
  
</div>

 
 
 
</body>
</html>

CSS

.button-area{
  margin: 10px auto;
  display:grid;
  font-size:1vw;
  grid-template-columns:repeat(4, 1fr);
  width: 40%;
}

.button-area a{
	background: #999;
    padding: 1em 2.4em;
    font-size: .9em;
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.cta-1{
grid-column: 1/3;

}


.cta-2{
grid-column: 3/5;
}

.cta-3{
grid-column: 2/4;
}