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

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

Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.4k
Loading Stepper

Author:
Cristian

5 months ago

721
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.8k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

8.8k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.8k
Onboarding steps section

Author:
Prashant

1 year ago

5.4k
List of steps

Author:
Leif99

2 years ago

13k
step
html , css

Author:
Hacker Development

1 month ago

15
Steps for complex forms

Author:
Ron Hicks

2 years ago

10.7k
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

947
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components