JSFiddle - React, Tailwind, and code Playground

by Jérémie LITZLER

HTML

<details>
    <summary class="widget-title section-title" aria-label="Cliquer pour voir les catégories" title="Cliquer pour voir les catégories">
      <span class="widget-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"></path>
  <line x1="5" y1="9" x2="19" y2="9"></line>
  <line x1="5" y1="15" x2="19" y2="15"></line>
  <line x1="11" y1="4" x2="7" y2="20"></line>
  <line x1="17" y1="4" x2="13" y2="20"></line>
</svg>


</span>
      <span class="widget-title"> Catégories </span>
    </summary>
    <div class="tagCloud-tags">
      
      <a href="https://jeremielitzler.fr/categories/jardin/" class="font_size_21">
        Jardin
      </a>
      
      <a href="https://jeremielitzler.fr/categories/plantes/" class="font_size_15">
        Plantes
      </a>
      
      <a href="https://jeremielitzler.fr/categories/energie/" class="font_size_12">
        Energie
      </a>
      
      <a href="https://jeremielitzler.fr/categories/sante/" class="font_size_10">
        Santé
      </a>
      
      <a href="https://jeremielitzler.fr/categories/tutoriels/" class="font_size_9">
        Tutoriels
      </a>
      
      <a href="https://jeremielitzler.fr/categories/alimentation/" class="font_size_2">
        Alimentation
      </a>
      
      <a href="https://jeremielitzler.fr/categories/entreprenariat/" class="font_size_2">
        Entreprenariat
      </a>
      
      <a href="https://jeremielitzler.fr/categories/temoignages/" class="font_size_2">
        Témoignages
      </a>
      
      <a href="https://jeremielitzler.fr/categories/avis-de-produits/" class="font_size_1">
        Avis de produits
      </a>
      
      <a href="https://jeremielitzler.fr/categories/biodiversite-et-agroecologie/" class="font_size_1">
        Biodiversité et...

CSS

details > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0 0.5em;
}

details summary::after {
    content: "⬇️ CLick to open";
    font-size: x-small;
    margin-right: 1em;
    margin-left: auto;
}

details[open] summary::after {
    content: "⬆️ Click to close";
    font-size: x-small;
    margin-left: auto;
}

.tagCloud-tags {
  display:flex;
  flex-wrap: wrap;
}

.tagCloud-tags a  {
  padding: 1em;
  margin-right: 4px;
  margin-bottom: 4px;
  border: 1px solid grey;
}