Steps section for how it works

Info cards for how does it work section?

This tailwind example is contributed by Anonymous, on 21-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Anonymous

Tailwind v3.4 2.1k 6

Fork Fullscreen

<section class="py-12 bg-gray-50 dark:bg-gray-900">
  <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl xl:text-5xl">
        How does FastDoc work?
      </h2>
      <p class="max-w-md mx-auto mt-5 text-base font-normal text-gray-600 dark:text-gray-300">
        FastDoc provides AI-driven document analysis, allowing you to quickly process and understand documents in various formats.
      </p>
    </div>

<div class="flex flex-col items-center max-w-md mx-auto mt-8 lg:mt-20 lg:flex-row lg:max-w-none">
      
      <div class="relative flex-1 w-full overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg">
        <div class="py-8 px-9">
          <div class="inline-flex items-center justify-center w-10 h-10 text-base font-bold text-white bg-gray-900 dark:bg-gray-700 rounded-xl">
            1
          </div>
          <h3 class="text-lg font-semibold text-gray-600 mt-2 dark:text-white">Upload Your Document</h3>
          <p class="mt-4 text-xl font-medium text-gray-900 dark:text-gray-300">
            Simply upload your document in any supported format, and FastDoc will begin analyzing it instantly.
          </p>
        </div>
      </div>

<div class="relative flex-1 w-full mt-8 lg:mt-0">
        <div class="absolute -inset-4">
          <div class="w-full h-full mx-auto rotate-180 opacity-20 blur-lg filter" style="background:linear-gradient(90deg, #44ff9a -0.55%, #44b0ff 22.86%, #8b44ff 48.36%, #ff6644 73.33%, #ebff70 99.34%)"></div>
        </div>
        <div class="relative overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg">
          <div class="py-8 px-9">
            <div class="inline-flex items-center justify-center w-10 h-10 text-base font-bold text-white bg-gray-900 dark:bg-gray-700 rounded-xl">
              2
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mt-2 dark:text-white">AI Document Analysis</h3>
            <p class="mt-4 text-xl font-medium text-gray-900 dark:text-gray-300">
              FastDoc’s AI algorithms will extract key information, analyze the document’s content, and generate an overview.
            </p>
          </div>
        </div>
      </div>

<div class="relative flex-1 w-full mt-8 lg:mt-0">
        <div class="relative overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg">
          <div class="py-8 px-9">
            <div class="inline-flex items-center justify-center w-10 h-10 text-base font-bold text-white bg-gray-900 dark:bg-gray-700 rounded-xl">
              3
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mt-2 dark:text-white">Download or Share Results</h3>
            <p class="mt-4 text-xl font-medium text-gray-900 dark:text-gray-300">
              Once the analysis is complete, download the results or share them instantly.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.6k
Steps section
Show features or steps of your website. Each step Includes Icons.

Komal Jain

2 years ago

10.4k
Loading Stepper

Cristian

1 year ago

2.3k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k
Shoping form steps

Carlos

2 years ago

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

Anonymous

2 years ago

10.7k
Steps block

Ron Hicks

3 years ago

13.2k
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.

Abhiraj

1 year ago

2.9k
Onboarding steps section

Prashant

2 years ago

6.5k
How it works
Grids steps on how it works

Olajide Olamide (Laemmy)

6 months ago

695
List of steps

Leif99

3 years ago

13.9k