Home
EliteAI Tools
How It Works Steps

How It Works Steps

This tailwind example is contributed by EliteAI Tools, on 04-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author EliteAI Tools

580

Fork Fullscreen

<div class="max-w-3xl p-8">
  <h2 class="mb-2 text-xl text-gray-900">How It Works</h2>
  <div class="grid gap-6 lg:grid-cols-3 sm:grid-cols-2">
    <div class="p-4 bg-white border border-gray-200 rounded">
      <div class="flex items-center justify-between mb-3">
        <p class="font-semibold text-gray-800">Login/Signup</p>
        <svg class="w-5 h-5 text-gray-400 transform rotate-90 sm:rotate-0" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
        </svg>
      </div>
      <p class="text-sm leading-relaxed text-gray-600">
        Just login or signup to MagicSlides.app. It's free no credit card required.
      </p>
    </div>
    <div class="p-4 bg-white border border-gray-200 rounded">
      <div class="flex items-center justify-between mb-3">
        <p class="font-semibold text-gray-800">Create Presentation</p>
        <svg class="w-5 h-5 text-gray-400 transform rotate-90 sm:rotate-0" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
        </svg>
      </div>
      <p class="text-sm leading-relaxed text-gray-600">
        Create presentation from Topic, Text, Youtube Video, PDF, Docx and more in seconds using the webapp.
      </p>
    </div>
    <div class="p-4 bg-white border border-gray-200 rounded">
      <div class="flex items-center justify-between mb-3">
        <p class="font-semibold text-gray-800">Generate Final Presentation</p>
        <svg class="w-5 h-5 text-green-500 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path>
        </svg>
      </div>
      <p class="text-sm leading-relaxed text-gray-600">
        Your presentation will be ready in less than 2 minutes.
      </p>
    </div>
  </div>
</div>

Related Examples

Steps block

Author:
Ron Hicks

2 years ago

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

Author:
Komal Jain

1 year ago

8.8k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.4k
Onboarding steps section

Author:
Prashant

1 year ago

5.4k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.8k
Steps / Service Card

Author:
Anonymous

1 year ago

5.4k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11.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
Steps section

Author:
Steven Kuhn

2 years ago

9.3k
How does it work?

Author:
Abdul Baset Bappy

2 days ago

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

Author:
Anonymous

1 year ago

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

Author:
Anonymous

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components