Home
Anonymous
Steps section for how it works

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Anonymous

1.1k

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

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

Author:
Komal Jain

1 year ago

8.7k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.6k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

9.4k
How It Works Steps

Author:
EliteAI Tools

3 months ago

418
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

2 months ago

563
Onboarding steps section

Author:
Prashant

1 year ago

5.1k
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.5k
Tailwind simple stepper component

Author:
Santiago Hernandez

11 months ago

2.2k
Steps section

Author:
Steven Kuhn

2 years ago

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

Author:
Carlos

6 months ago

1.6k
Steps block

Author:
Ron Hicks

2 years ago

11.4k
Shoping form steps

Author:
Carlos

6 months ago

844

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components