steps alignment with tailwind-CodePudding

I want to create a custom steps with tailwind but step names are the near of the circles. How to put them below? Also how to make the distance between steps wider? they are too close

<div class="flex justify-center">       
    <div  class="mt-4 grid grid-cols-2 gap-y-6 sm:grid-cols-2 sm:gap-x-4">     
        <nav aria-label="Progress" class="sm:col-span-2 stepper">
            <ol role="list" class="rounded-md divide-y divide-gray-300 md:flex md:divide-y-0 ">
                <li class="relative md:flex-1 md:flex " >    
                                            
                <div class="absolute inset-0  flex items-center" aria-hidden="true">
                    <div class="h-0.5 w-80 bg-green-500 ml-9"></div>
                </div>
                <a href="#"  class="relative w-8 h-8 flex items-center justify-center  rounded-full">
                    <!-- Heroicon name: solid/check -->
                    <span :class="step == '2' ? 'bg-green-500 rounded-full group-hover:bg-green-800' : 'border-2 border-green-500 rounded-full '" class="flex-shrink-0 w-10 h-10 flex items-center justify-center ">
                                    
                        <svg x-show="step == '2'" class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span x-show="step == '1'" class="text-green-500 group-hover:text-green-900">01</span>
                    </span>
                    
                </a>
                <p :class="step == '1' ? 'text-green-500': 'text-gray-500'" class="ml-4 text-sm font-medium text-gray-500">step 1</p>                      
                    
                </li>
                <li class="relative md:flex-1 md:flex" >                             
                <a href="#" class="relative w-8 h-8 flex items-center justify-center bg-white  rounded-full" aria-current="step">
                    <span :class="step == '2' ? 'border-green-500': 'border-gray-300'" class="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400">
                        <span :class="step == '2' ? 'text-green-500 group-hover:text-green-900' : ''" class="text-gray-500 group-hover:text-gray-900">02</span>
                    </span>                                  
                </a>
                <p :class="step == '2' ? 'text-green-500': 'text-gray-500'" class="ml-4 text-sm font-medium text-gray-500">step 2</p>                         
                </li>                            
            </ol>
        </nav>
    </div>
</div>

CodePudding user response：

Not sure about the tailwind CSS but below is the code I created as a reference for your use, make the changes where ever needed.

.main-steps {
  display: flex;
  margin: 5px 30px;
  padding: 0;
  text-align: center;
  list-style-type: none;
  counter-reset: list;
}

.main-steps li {
  margin-right: 5px;
  position: relative;
}

.main-steps li::before {
  counter-increment: list;
  content: counter(list);
  height: 30px;
  width: 30px;
  line-height: 30px;
  border-radius: 100%;
  margin-bottom: 5px;
  border: 1px solid green;
  display: inline-block;
}

.main-steps li a {
  display: block;
  text-transform: capitalize;
  text-decoration: none;
  color: green;
}

<ul class="main-steps">
  <li><a href="javscript:void(0);">step one</a></li>
  <li><a href="javscript:void(0);">step two</a></li>
  <li><a href="javscript:void(0);">step threen</a></li>
  <li><a href="javscript:void(0);">step four</a></li>
</ul>

CodePudding user response：

Take a look to this clean tailwind stepper. https://play.tailwindcss.com/TyBk6nPJM4. maybe is helpful.