JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="articles">
     <h1 class="title">COUCOU</h1> 
    <div class="topic topic1">articles de blog
      <div class="test">gui</div>
      <div class="test2">llaume</div>
    </div>
    <div class="topic">articles de blog</div>
    <div class="topic">articles de blog</div>
    <div class="topic">articles de blog</div>

    <div class="topic2">articles</div>
    <div class="topic2">articles</div>
    <div class="topic2">articles</div>
    <div class="topic2">articles</div>
</div>

CSS

.articles{
    display: flex;
    justify-content: space-around;
    border: #242016 solid;
    flex-wrap: wrap;
    margin:10px;
    padding:10px;
    gap: 10px;
}
.test, .test2{
    border: 1px green solid;
    font: 10px;
    margin-top: 50px;
    text-align: center;
}
.topic, .topic2 {
    flex: 1 1;
    border:solid 1px red;
}
.topic1 {
  margin:10px;
  padding:10px;
}

.title {
  flex: 1 1 100%;
  text-align:center;
}