JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<ul class='ccircle'>
  <li class='clum'>KS1</li>
  <li class='bar'></li>
  <li class='clum'>KS2</li>
  <li class='clum'>KS3</li>
  <li class='clum'>KS4</li>
  <li class='clum'>KS5</li>
  </ul>
  
  <div class='ccircle'>
<p class='clum'>KS1</p>
  <p class='bar'></p>
  <p class='clum'>KS1</p>
  
  </div>

CSS

.ccircle{
  display:flex;
  width:100%;
  margin: 0;
  padding:0;
  
  flex-direction: row;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
}
.clum{
  border-radius: 50%;
  background-color: #fff;
  border: 5px solid grey;
  padding: 5px;
  width:90px;
  height: 90px;
  margin: 10px;
  line-height: 90px;
  color: #2E3945;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  font-family: 'Cabin Sketch', cursive;
  }
  .bar{
    content: '';
    background-color: grey;
    height: 5px;
    width: 60px;

   
}