Home
ReddRadar.com
Clean How to Use Section

Clean How to Use Section

Minimal how to use guide section

This tailwind example is contributed by ReddRadar.com, on 24-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author ReddRadar.com

Fork Fullscreen

<div class="py-16 bg-gray-50 lg:py-24" id="how-to-use">
        <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="mb-16 text-center">
                <h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl lg:text-5xl fade-in">How to Use
                    <span class="text-red-600">R</span>edd<span class="text-red-600">R</span>adar
                </h2>
                <p class="max-w-3xl mx-auto text-lg leading-relaxed text-gray-700 sm:text-xl fade-in" style="animation-delay: 0.2s;">
                    Unlock
                    Reddit's lead generation potential in three simple steps.
                </p>
            </div>

<div class="grid gap-8 md:grid-cols-3 lg:gap-12">
                <div class="p-8 transition-transform duration-300 bg-white rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1.5 fade-in" style="animation-delay: 0.3s;">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 text-red-500 bg-red-100 rounded-full">
                        <span class="text-3xl font-bold">1</span>
                    </div>
                    <h3 class="mb-3 text-xl font-semibold text-gray-800">Define Your Target</h3>
                    <p class="leading-relaxed text-gray-700">
                        Input your product details. reddradar will analyze and
                        find the most relevant subreddits for your business.
                    </p>
                </div>

<div class="p-8 transition-transform duration-300 bg-white rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1.5 fade-in" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 text-red-500 bg-red-100 rounded-full">
                        <span class="text-3xl font-bold">2</span>
                    </div>
                    <h3 class="mb-3 text-xl font-semibold text-gray-800">Receive Alerts</h3>
                    <p class="leading-relaxed text-gray-700">
                        Get notifications when potential lead opportunities arise. Our AI
                        identifies the most promising conversations for your business.
                    </p>
                </div>

<div class="p-8 transition-transform duration-300 bg-white rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1.5 fade-in" style="animation-delay: 0.5s;">
                    <div class="flex items-center justify-center w-16 h-16 mb-6 text-red-500 bg-red-100 rounded-full">
                        <span class="text-3xl font-bold">3</span>
                    </div>
                    <h3 class="mb-3 text-xl font-semibold text-gray-800">Engage &amp; Convert</h3>
                    <p class="leading-relaxed text-gray-700">
                        Use our comment suggestions to engage
                        authentically. Track and
                        manage your leads through our intuitive dashboard.
                    </p>
                </div>
            </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.

Author:
Computer guy

1 year ago

10.7k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.8k
Steps section for how it works
Info cards for how does it work section?

Author:
Anonymous

7 months ago

1.3k
Steps block

Author:
Ron Hicks

2 years ago

11.6k
How it works section with steps
big and bold how it works section with steps

Author:
Carlos

8 months ago

1.8k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

4 months ago

780
Loading Stepper

Author:
Cristian

4 months ago

622
Steps section for form
with short description

Author:
Yuni saputara

1 year ago

1.9k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

13.9k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

9.5k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11.6k
Onboarding steps section

Author:
Prashant

1 year ago

5.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components