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

712

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

Responsive steps section

Author:
Simon Scheffer

2 years ago

9k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.2k
Steps section verticle

Author:
Ron Hicks

2 years ago

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

6 months ago

1.1k
Steps section

Author:
Steven Kuhn

2 years ago

9.4k
List of steps

Author:
Leif99

2 years ago

13.1k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

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

Author:
Anonymous

1 year ago

8.8k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.3k
Loading Stepper

Author:
Cristian

6 months ago

907
step
html , css

Author:
Hacker Development

2 months ago

39
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.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components