Steps section

Show features or steps of your website. Each step Includes Icons.

This tailwind example is contributed by Komal Jain, on 12-Oct-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us,stepper

Feature showcase Steps

Author Komal Jain

Tailwind v3.4 10.4k 15

Fork Fullscreen

<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-8">
    <h2 class="font-headline text-2xl font-semibold sm:text-3xl text-center">Revamp Your Website in Three Steps</h2>

<div class="grid sm:grid-cols-3 gap-16 sm:gap-8 mt-16 sm:mt-24">
        <div class="text-center">
            <div class="relative w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 mx-auto left-2">
                <div
                    class="z-10 relative w-full h-full bg-white rounded-full border border-gray-300 shadow flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.5"
                        stroke="currentColor" class="text-gray-500 w-1/2 h-1/2" alt="Import icon">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z">
                        </path>
                    </svg>
                </div>
                <div class="absolute inset-0 -translate-x-2 -translate-y-2 bg-blue-500 rounded-full"></div>
            </div>
            <h3 class="font-headline text-xl sm:text-2xl mt-6 sm:mt-10">1. Reimagine</h3>
            <p class="leading-relaxed mt-4">Begin by envisioning the new look and features for your website.</p>
        </div>
        <div class="text-center">
            <div class="relative w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 mx-auto left-2">
                <div
                    class="z-10 relative w-full h-full bg-white rounded-full border border-gray-300 shadow flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="0.5"
                        stroke="currentColor" class="text-gray-500 w-1/2 h-1/2" alt="Translate icon">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"></path>
                    </svg>
                </div>
                <div class="absolute inset-0 -translate-x-2 -translate-y-2 bg-blue-500 rounded-full"></div>
            </div>
            <h3 class="font-headline text-xl sm:text-2xl mt-6 sm:mt-10">2. Redesign</h3>
            <p class="leading-relaxed mt-4">Collaborate with your design and development team to give your website a
                fresh and modern design.</p>
        </div>
        <div class="text-center">
            <div class="relative w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 mx-auto left-2">
                <div
                    class="z-10 relative w-full h-full bg-white rounded-full border border-gray-300 shadow flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width=".5"
                        stroke="currentColor" class="text-gray-500 w-1/2 h-1/2" alt="Export icon">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z">
                        </path>
                    </svg>
                </div>
                <div class="absolute inset-0 -translate-x-2 -translate-y-2 bg-blue-500 rounded-full"></div>
            </div>
            <h3 class="font-headline text-xl sm:text-2xl mt-6 sm:mt-10">3. Relaunch</h3>
            <p class="leading-relaxed mt-4">After the redesign, relaunch your website and welcome your audience to the
                new experience.</p>
        </div>
    </div>
</div>

Related Examples

Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Computer guy

2 years ago

12k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Steps section for explaining process
Step component with a curved line connecting all steps

Anonymous

2 years ago

10.7k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k
Features list with icons on top

Lina Lindström

3 years ago

10.3k
Tailwind stepper example

Erik Hyatt

3 years ago

11.9k
Steps block

Ron Hicks

3 years ago

13k
Product feature section
Showcase product features with an image

Anonymous

3 years ago

14.7k
Steps / Service Card

Anonymous

2 years ago

6.8k
Onboarding steps section

Prashant

2 years ago

6.5k
Steps section

Steven Kuhn

3 years ago

10.6k
Steps section verticle

Ron Hicks

3 years ago

10.5k
Feature Cards
w/ large icons

Mr Robot

4 years ago

10.3k
tailwind services section
display features/services of your product

L.J. Weber

3 years ago

21.4k