JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<ul class="a-progress">
<!--   <li class="a-progress__item">
    <svg width="25px" height="25px" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12.5" cy="12.5" r="12.5" fill="#000" opacity="0.1" />
    </svg>
    <p class="a-progress__label" style="color: #000; opacity: 0.2">無効化</p>
  </li> -->
  <li class="a-progress__item">
    <svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12.5" cy="12.5" r="12.5" fill="#BDC3C7" />
    </svg>
    <p class="a-progress__label">新規</p>
  </li>
  <li class="a-progress__item">
    <svg width="25px" height="25px" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12.5" cy="12.5" r="12.5" fill="#FFBC56" />
    </svg>
    <p class="a-progress__label">進行中</p>
  </li>
  <li class="a-progress__item">
    <svg width="25px" height="25px" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12.5" cy="12.5" r="12.5" fill="#2ECC71" />
    </svg>
    <p class="a-progress__label">完了</p>
  </li>
  <li class="a-progress__item">
    <svg width="25px" height="25px" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12.5" cy="12.5" r="12.5" fill="#E74C3C" />
    </svg>
    <p class="a-progress__label">差し戻し</p>
  </li>
</ul>

SCSS

.a-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  padding: 0;
  list-style: none;
  &__item {
    display: grid;
    grid-template-rows: repeat(2, auto);
    row-gap: 5px;
    justify-items: center;
  }
  &__label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 14px;
  }
}