JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
<!-- <div class="columns is-centered is-vcentered">
  <div class="column is-2">
    <div class="box has-text-centered">
       A
    </div>
  </div>
  <div class="column is-2">
    <div class="box has-text-centered">
       B
       more elements
     </div>
  </div>
</div>
 -->


<ul class="thing-list">
  <li class="thing">
    <circle-component>
      <span>Text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
</ul>



<ul class="thing-list grid-version">
  <li class="thing">
    <circle-component>
      <span>Text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
</ul>

CSS

/* .box {
  border-radius: 50% 50%;
}

.box::after {
  content: "";
  display: block;
  padding-bottom: 50%;

}
 */


* {
  box-sizing: border-box; /* look this up if you don't already use it */
}




circle-component {
  display: block; /* custom components are inline by default */
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid red;
  display: flex;
  flex-direction: column; /* one way to do that... */
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}




.thing-list {
  display: flex; /* or you could do grid - depends */
  flex-direction: row;
  flex-wrap: wrap;
}

.thing-list.grid-version {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* depends on what you want to happen */
  border: 1px solid blue;
}

.thing-list .thing {
  padding: 10px; /* maybe */
}



/* you could totally use position absolute for the text if you want - but it's nice to not need that */