Tailwind CSS How It Works

Default how it works

This example shows a default how it works section with a set of columns where you can show the steps of the process.

Preview
Code

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-12 gap-10 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-3 flex">
                    <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-normal">How It Works</h2>
                    <p class="max-w-2xl text-center text-gray-400 text-base font-normal leading-relaxed">A detailed breakdown of processes and mechanisms behind a system or product, simplifying complex concepts for easy understanding.</p>
                </div>
                <div class="w-full justify-start items-start gap-8 grid md:grid-cols-3 grid-cols-1">
                    <div class="w-full flex-col justify-start items-start gap-2.5 inline-flex">
                        <div class="w-full flex justify-between relative">
                            <h4 class="text-gray-900 text-xl font-semibold leading-8">Input Collection</h4>
                            <h3 class="text-gray-100 text-7xl font-extrabold font-manrope leading-[100px] absolute -top-9 right-0">1</h3>
                        </div>
                        <p class="text-gray-400 text-base font-normal leading-relaxed">Gather all necessary data or materials required for the process. For example, in a 3D printing project, this involves preparing the digital design files and ensuring the printer has sufficient filament.</p>
                    </div>
                    <div class="w-full flex-col justify-start items-start gap-2.5 inline-flex">
                        <div class="w-full flex justify-between relative">
                            <h4 class="text-gray-900 text-xl font-semibold leading-8">Processing</h4>
                            <h3 class="text-gray-100 text-7xl font-extrabold font-manrope leading-[100px] absolute -top-9 right-0">2</h3>
                        </div>
                        <p class="text-gray-400 text-base font-normal leading-relaxed">Execute the core mechanism or operation. For 3D printing, this step includes the printer interpreting the digital model and methodically laying down layers of material to build the object.</p>
                    </div>
                    <div class="w-full flex-col justify-start items-start gap-2.5 inline-flex">
                        <div class="w-full flex justify-between relative">
                            <h4 class="text-gray-900 text-xl font-semibold leading-8">Output and Review</h4>
                            <h3 class="text-gray-100 text-7xl font-extrabold font-manrope leading-[100px] absolute -top-9 right-0">3</h3>
                        </div>
                        <p class="text-gray-400 text-base font-normal leading-relaxed">Finalize the process and assess the results. In 3D printing, this means removing the finished object from the printer, inspecting it for quality, and performing any necessary post-processing steps like sanding or painting.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

How it works with icons

Following how it works, the tailwind section shows some steps behind a particular process with icons to separate each step.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-12 gap-10 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-3 flex">
                    <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-normal">How It Works</h2>
                    <p class="w-full text-center text-gray-500 text-base font-normal leading-relaxed">A detailed breakdown of processes and mechanisms behind a system or product, <br/>simplifying complex concepts for easy understanding.</p>
                </div>
                <div class="w-full justify-start items-center gap-4 flex md:flex-row flex-col">
                    <div class="grow shrink basis-0 flex-col justify-start items-center gap-2.5 inline-flex">
                        <div class="self-stretch flex-col justify-start items-center gap-0.5 flex">
                            <h3 class="self-stretch text-center text-indigo-600 text-4xl font-extrabold font-manrope leading-normal">1</h3>
                            <h4 class="self-stretch text-center text-gray-900 text-xl font-semibold leading-8">Design and Planning</h4>
                        </div>
                        <p class="self-stretch text-center text-gray-400 text-base font-normal leading-relaxed">Outline the website's purpose, target audience, and features. Create wireframes and design mockups to visualize the layout and...</p>
                    </div>
                    <svg class="md:flex hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M5.50159 6L11.5018 12.0002L5.49805 18.004M12.5016 6L18.5018 12.0002L12.498 18.004" stroke="#4F46E5" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div class="grow shrink basis-0 flex-col justify-start items-center gap-2.5 inline-flex">
                        <div class="self-stretch flex-col justify-start items-center gap-0.5 flex">
                            <h3 class="self-stretch text-center text-indigo-600 text-4xl font-extrabold font-manrope leading-normal">2</h3>
                            <h4 class="self-stretch text-center text-gray-900 text-xl font-semibold leading-8">Development</h4>
                        </div>
                        <p class="self-stretch text-center text-gray-400 text-base font-normal leading-relaxed">Convert the design into a functional website using HTML, CSS, and JavaScript. Ensure the site is responsive and works on various...</p>
                    </div>
                    <svg class="md:flex hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M5.50159 6L11.5018 12.0002L5.49805 18.004M12.5016 6L18.5018 12.0002L12.498 18.004" stroke="#4F46E5" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div class="grow shrink basis-0 flex-col justify-start items-center gap-2.5 inline-flex">
                        <div class="self-stretch flex-col justify-start items-center gap-0.5 flex">
                            <h3 class="self-stretch text-center text-indigo-600 text-4xl font-extrabold font-manrope leading-normal">3</h3>
                            <h4 class="self-stretch text-center text-gray-900 text-xl font-semibold leading-8">Testing and Deployment</h4>
                        </div>
                        <p class="self-stretch text-center text-gray-400 text-base font-normal leading-relaxed">Test the website for issues like broken links and bugs. After making necessary adjustments, deploy it to a web server and conduct...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

How it works with illustration

Use the following tailwind how it works example to show process steps with creative illustration and numeric step indication.

Preview
Code

Figma File

                                                <!--Custom style-->
 <style>
       .swiper-wrapper {
          height: fit-content !important;
          width: 100% !important;
      }
      .swiper-pagination{
          display: flex;
          align-items: center;
          justify-content: start;
          gap: 16px;
          position: relative;
      }
      .swiper-pagination-bullet {
          width: 42px;
          height: 42px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 26px;
          font-size: 16px;
          color: #6B7280;
          opacity: 1;
          background: #F9FAFB;
          border: 1px solid #E5E7EB;
      }
      .swiper-pagination-bullet-active {
      color: #fff;
      background: #1D4ED8;
      }
      .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom,0px);
      }
  </style> 
 <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-12 gap-8 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-3 flex">
                    <span class="w-full text-center text-gray-500 text-base font-normal leading-relaxed">How It Works</span>
                    <h2 class="w-full text-center text-indigo-700 text-4xl font-bold font-manrope leading-normal">Steps to Open Your Account</h2>
                </div>
                <div class="w-full justify-start lg:items-end items-center lg:gap-16 gap-8 flex lg:flex-row flex-col">
                    <img class="object-cover" src="https://pagedone.io/asset/uploads/1720589731.png" alt="How It Works image" />
                    <div class="swiper mySwiper flex flex-col lg:gap-32 gap-16 w-full">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="w-full flex-col justify-center items-start gap-4 flex">
                                  <span class="w-full text-blue-700 text-base font-medium leading-relaxed lg:text-start text-center">1st Step</span>
                                  <div class="w-full flex-col justify-center lg:items-start items-center gap-1.5 flex">
                                      <h4 class="text-gray-900 text-xl font-semibold leading-8 lg:text-start text-center">Gather Required Documents</h4>
                                      <p class="lg:max-w-3xl w-full text-gray-400 text-base font-normal leading-relaxed lg:text-start text-center">Collect necessary documents such as identification (passport or driver's license), proof of address (utility bill or lease agreement), and Social Security Number (or equivalent for your country).</p>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="w-full flex-col justify-center items-start gap-4 flex">
                                  <span class="w-full text-blue-700 text-base font-medium leading-relaxed lg:text-start text-center">2nd Step</span>
                                  <div class="flex-col justify-center lg:items-start items-center gap-1.5 flex">
                                      <h4 class="text-gray-900 text-xl font-semibold leading-8 lg:text-start text-center">Gather Required Documents</h4>
                                      <p class="lg:max-w-3xl w-full text-gray-400 text-base font-normal leading-relaxed lg:text-start text-center">Collect necessary documents such as identification (passport or driver's license), proof of address (utility bill or lease agreement), and Social Security Number (or equivalent for your country).</p>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="w-full flex-col justify-center items-start gap-4 flex">
                                  <span class="w-full text-blue-700 text-base font-medium leading-relaxed lg:text-start text-center">3rd Step</span>
                                  <div class="flex-col justify-center lg:items-start items-center gap-1.5 flex">
                                      <h4 class="text-gray-900 text-xl font-semibold leading-8 lg:text-start text-center">Gather Required Documents</h4>
                                      <p class="lg:max-w-3xl w-full text-gray-400 text-base font-normal leading-relaxed lg:text-start text-center">Collect necessary documents such as identification (passport or driver's license), proof of address (utility bill or lease agreement), and Social Security Number (or equivalent for your country).</p>
                                  </div>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="w-full flex-col justify-center items-start gap-4 flex">
                                  <span class="w-full text-blue-700 text-base font-medium leading-relaxed lg:text-start text-center">4th Step</span>
                                  <div class="flex-col justify-center lg:items-start items-center gap-1.5 flex">
                                      <h4 class="text-gray-900 text-xl font-semibold leading-8 lg:text-start text-center">Gather Required Documents</h4>
                                      <p class="lg:max-w-3xl w-full text-gray-400 text-base font-normal leading-relaxed lg:text-start text-center">Collect necessary documents such as identification (passport or driver's license), proof of address (utility bill or lease agreement), and Social Security Number (or equivalent for your country).</p>
                                  </div>
                                </div>
                              </div>
                           
                        </div>
                        <div class="swiper-pagination lg:justify-start justify-center"></div>
                    </div>                    
                </div>
            </div>
        </div>
    </section>
<!-- Custom JS -->
  <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 32,
            loop: true,
            centeredSlides: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + "</span>";
            },
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });
    </script>

HTML Copy

How it works with cards

This example shows a how-it-works section with cards, where you can show the steps of the process with cards.

Preview
Code

Figma File

Side by side How it works: blocks

Use this example to show a vertical process step card on one side and some headings and descriptions on the other..

Preview
Code

Figma File

How it works with the grid layout

This example shows a how-it-works section with grid layout where you can show the steps of the process with help and description inside cards.

Preview
Code

Figma File

How it works with horizontal progression

Use the following example to showcase the horizontal progress of a particular process with icons and separators.

Preview
Code

Figma File

How it works cards with images

This example showcases how the process works inside the card with its images and detailed description.

Preview
Code

Figma File

How it works cards with illustrations

Use the below example to show a process steps card alongside creative illustrations.

Preview
Code

Figma File

Vertical how it works cards

Showcase how you process STEPs inside cards with their description in a vertical format.

Preview
Code

Figma File

horizontal how it works steps

This example shows process steps with separators in a horizontal way.

Preview
Code

Figma File

How it works with the CTA

This example shows a how it works section with a CTA button, heading, and paragraph above the process steps.

Preview
Code

Figma File

splitted how it works blocks

Use this example to show process steps in a split way, with a heading and description on one side and process steps on the other.

Preview
Code

Figma File

How it works with creative illustration

This tailwind CSS how it works example can be used for vertical process steps alongside creative illustration that provides a modern look.

Preview
Code

Figma File

How it works in dark mode

Use this example if you want to show process steps in a grid-like manner, especially for the dark version of the website.

Preview
Code

Figma File