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

421

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

List of steps

Author:
Leif99

2 years ago

12.9k
Profile Form
Progressive Profile Form

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

1 year ago

4k
Tailwind simple stepper component

Author:
Santiago Hernandez

1 year ago

2.2k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

3 months ago

721
Steps section for form
with short description

Author:
Yuni saputara

11 months ago

1.8k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11.4k
Steps block

Author:
Ron Hicks

2 years ago

11.4k
Onboarding steps section

Author:
Prashant

1 year ago

5.3k
Loading Stepper

Author:
Cristian

4 months ago

519
step
html , css

Author:
Hacker Development

1 day ago

5
Steps / Service Card

Author:
Anonymous

1 year ago

5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components