Tailwind CSS Step Navigation: Circle with Text

steps_navigation_circle_with_text.html

<!--
  Welcome to Tailwind Play, the official Tailwind CSS playground!

  Everything here works just like it does when you're running Tailwind locally
  with a real build pipeline. You can customize your config file, use features
  like `@apply`, or even add third-party plugins.

  Feel free to play with this example if you're just learning, or trash it and
  start from scratch if you know enough to be dangerous. Have fun!
-->
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
  <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <ul>
        <li class="relative h-24 border-l-2 border-indigo-700 pl-7">
          <div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full bg-indigo-700">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 text-white">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
          </div>
          <div>
            <span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span>
            <p class="text-xs text-gray-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p>
          </div>
        </li>
        <li class="relative h-24 border-l-2 border-gray-300 pl-7">
          <div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-indigo-700 bg-white">
            <div class="circle2 h-3 w-3 rounded-full bg-indigo-700"></div>
          </div>
          <div>
            <span class="text-sm font-semibold text-indigo-700">Lorem ipsum dolor sit amet.</span>
            <p class="text-xs text-gray-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p>
          </div>
        </li>
        <li class="relative h-24 border-l-2 border-gray-300 pl-7">
          <div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white"></div>
          <div class="text-gray-400">
            <span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span>
            <p class="text-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p>
          </div>
        </li>
        <li class="relative h-24 pl-7">
          <div class="circle absolute -left-[1.15rem] flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-300 bg-white"></div>
          <div class="text-gray-400">
            <span class="text-sm font-semibold">Lorem ipsum dolor sit amet.</span>
            <p class="text-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt placeat architecto quia. Error, consequuntur ipsa.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>