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

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

Tailwind stepper example

Author:
Erik Hyatt

2 years ago

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

Author:
Anonymous

1 year ago

9.4k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

12.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Steps / Service Card

Author:
Anonymous

1 year ago

5.8k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.7k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.7k
Steps section for form
with short description

Author:
Yuni saputara

1 year ago

2.3k
Steps section

Author:
Steven Kuhn

2 years ago

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

9 months ago

1.3k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

4.5k
Steps block

Author:
Ron Hicks

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components