JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

ol {
  display: inline-flex;
  counter-reset: li 5;
	background: #462860;
  border-radius: 50px;
}

ol>li {  
  color: #fff;
  height: 50px;
  line-height: 50px;
  width: 50px;
  text-align: center;
}
ol>li:before {
  counter-increment: li;
  content: counter(li) " ";
}
ol>li:first-of-type,
ol>li:last-of-type{
	background: #BD3BA6;
	border-radius: 50%;
}