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