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

1.2k

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

Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

10.3k
Loading Stepper

Author:
Cristian

1 year ago

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

2 years ago

11.6k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.9k
step
html , css

Author:
Hacker Development

8 months ago

453
Shoping form steps

Author:
Carlos

1 year ago

1.8k
Steps / Service Card

Author:
Anonymous

2 years ago

6k
Onboarding steps section

Author:
Prashant

2 years ago

6.2k
Tailwind simple stepper component

Author:
Santiago Hernandez

1 year ago

3.1k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

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

1 year ago

1.7k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components