JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="status"><span>1</span> Done</div>
<div class="status"><span>2</span>Some copy</div>
<div class="status"><span>3</span> Done ya</div>

CSS

body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.status {
  display: inline-flex;
  padding: .5rem;
  background-color: lightgray;
}

.status span {
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-color: white;
  margin-right: 1rem;
  border-radius: 100%;
}