Home
Ron Hicks
Steps block

Steps block

This tailwind example is contributed by Ron Hicks, on 10-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Ron Hicks

11.4k

Fork Fullscreen

<div class="text-center">
        <p class="mt-4 text-sm leading-7 text-gray-500 font-regular">
            STEPS
        </p>
        <h3 class="text-3xl sm:text-5xl leading-normal font-extrabold tracking-tight text-gray-900">
            How it <span class="text-indigo-600">Works?</span>
        </h3>

</div>

<li class=" bg-gray-100 p-5 pb-10 text-center">
                <div class="flex flex-col items-center">
                    <div class="flex-shrink-0 relative top-0 -mt-16">
                        <div
                            class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                            1
                        </div>
                    </div>
                    <div class="mt-4">
                        <h4 class="text-lg leading-6 font-semibold text-gray-900">Headline</h4>
                        <p class="mt-2 text-base leading-6 text-gray-500">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        </p>
                    </div>
                </div>
            </li>
            <li class=" bg-gray-100 p-5 pb-10 text-center">
                <div class="flex flex-col items-center">
                    <div class="flex-shrink-0 relative top-0 -mt-16">
                        <div
                            class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                            2
                        </div>
                    </div>
                    <div class="mt-4">
                        <h4 class="text-lg leading-6 font-semibold text-gray-900">Headline</h4>
                        <p class="mt-2 text-base leading-6 text-gray-500">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        </p>
                    </div>
                </div>
            </li>
            <li class=" bg-gray-100 p-5 pb-10 text-center">
                <div class="flex flex-col items-center">
                    <div class="flex-shrink-0 relative top-0 -mt-16">
                        <div
                            class="flex items-center justify-center h-20 w-20 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                            3
                        </div>
                    </div>
                    <div class="mt-4">
                        <h4 class="text-lg leading-6 font-semibold text-gray-900">Headline</h4>
                        <p class="mt-2 text-base leading-6 text-gray-500">
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        </p>
                    </div>
                </div>
            </li>

</ul>
    </div>

</div>

Related Examples