Tailwind How it works Components (212)

How it works from NEUB

Split-Screen Feature Section with Desk Photo and Numbered Points

A marketing feature section with a bold heading on the right and a 2x2 grid of numbered pink badges with placeholder paragraph text. The left side shows a framed photo of a desk setup with a pink offset border and yellow corner accents.

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-2/5 px-4 mt-12 lg:mt-0 order-last lg:order-first">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-2 border-black"></div>
                    <img class="relative w-full h-full max-h-96 lg:max-h-full object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1691580438246-a6e5cb35ca05?q=80&amp;w=764&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-yellow-300 border-2 border-black"></div>
                    <div class="absolute -top-4 -left-4 w-16 h-16 bg-yellow-300 border-2 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-3/5 px-4">
                <div class="lg:max-w-lg xl:max-w-2xl lg:ml-auto">
                    <h2 class="mb-12 max-w-xl text-3xl leading-tight sm:text-4xl md:text-5xl font-black font-heading tracking-tight text-black">Lorem ipsum dolor sit amet consectetur</h2>
                    <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">1</span>
                            <p class="max-w-sm text-lg text-gray-400 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">2</span>
                            <p class="max-w-sm text-lg text-gray-400 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">3</span>
                            <p class="max-w-sm text-lg text-gray-400 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">4</span>
                            <p class="max-w-sm text-lg text-gray-400 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

How it works from Casper

Tailwind CSS

Casper

How Does Casper Work three-step feature section

A dark marketing section titled 'How Does Casper Work' with three numbered steps (01. Upload, 02. Auto Generation, 03. Select & Send), each pairing a short text block with a gradient-framed 3D illustration in an alternating zigzag layout.

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="absolute top-0 right-0 w-186 h-186 bg-gradient-to-t from-violet-900 to-darkBlue-900 rounded-full filter blur-4xl"></div>
    <div class="relative max-w-md md:max-w-8xl mx-auto">
      <div class="text-center mb-14">
        <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">How Does Casper Work</h2>
        <p class="text-xl text-gray-400">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
      </div>
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-1.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">01. Upload</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center -mx-4 mb-16">
        <div class="w-full md:w-1/2 px-4 order-last md:order-first">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">02. Auto Generation</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 md:ml-auto items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-2.png" alt="">
          </div>
        </div>
      </div>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <div class="relative flex max-w-md pt-12 lg:pt-20 pl-12 lg:pl-20 items-end justify-end rounded-3xl overflow-hidden">
            <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/how-it-works/bg-square-gradient.png" alt="">
            <img class="relative w-87 h-87 rounded-tl-3xl object-cover" src="casper-assets/how-it-works/image-square-sm-3.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg">
            <h3 class="font-heading text-4xl lg:text-5xl font-semibold text-white">03. Select &amp; Send</h3>
            <div class="my-6 h-1 w-full bg-white bg-opacity-20"></div>
            <p class="text-xl text-white tracking-tight">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

How it works from Vista

Tailwind CSS

Vista

How it works three-step feature section on dark background

A dark marketing section with a bold heading and three numbered steps connected by dotted lines, each with a circular pink-outlined icon, title, and short description explaining transaction input, categorization, and report generation.

<section class="bg-darkPink-900 py-32">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-4xl md:text-5xl mb-16 font-bold">How it works</h1>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex items-center gap-10 mb-4">
                    <div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500">
                        <div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
                            <img class="h-6" src="vista-assets/images/how-it-works/calculator.svg" alt="">
                        </div>
                    </div>
                    <div class="border-b border-dashed border-white border-opacity-20 h-px flex-1"></div>
                </div>
                <p class="text-white text-xl font-semibold mb-1">Input Transactions</p>
                <p class="text-white text-opacity-70 max-w-xs">Record your financial transactions such as receipts, and other relevant documents.</p>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex items-center gap-10 mb-4">
                    <div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500">
                        <div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
                            <img class="h-6" src="vista-assets/images/how-it-works/tag.svg" alt="">
                        </div>
                    </div>
                    <div class="border-b border-dashed border-white border-opacity-20 h-px flex-1"></div>
                </div>
                <p class="text-white text-xl font-semibold mb-1">Categorization</p>
                <p class="text-white text-opacity-70 max-w-sm">Automatically categorizes the recorded transactions, such as income and expenses.</p>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="rounded-full w-14 h-14 flex items-center justify-center border border-pink-500 mb-4">
                    <div class="w-11 h-11 bg-pinkSecondary-900 flex items-center justify-center rounded-full border border-white border-opacity-10">
                        <img class="h-6" src="vista-assets/images/how-it-works/document.svg" alt="">
                    </div>
                </div>
                <p class="text-white text-xl font-semibold mb-1">Generate Reports</p>
                <p class="text-white text-opacity-70 max-w-xs">Generate financial reports, such as income statements, balance sheets, and cash flow.</p>
            </div>
        </div>
    </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

How it works from Cyber

Tailwind CSS

Cyber

Quantum Protocol Architecture Feature Section with Numbered Steps

A dark-themed marketing feature section with a large gradient heading, a tilted photograph of a person in a circular concrete opening on the left, and four numbered step blocks with monospace descriptions arranged in a two-by-two grid on the right.

<section class="relative py-20 bg-gradient-to-br from-black via-gray-950 to-black">
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-12 lg:mb-0">
        <div class="relative">
          <img class="w-full h-full max-h-96 lg:max-h-full object-cover border-2 border-blue-400 border-opacity-30 hover:border-purple-500 transition-all duration-300 transform hover:scale-105" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-0 hover:opacity-10 transition-opacity duration-300" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);"></div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
        </div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="max-w-xl lg:ml-auto">
          <h2 class="mb-12 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">QUANTUM PROTOCOL ARCHITECTURE </h2>
          <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 text-gray-950 font-bold text-xl leading-loose border-2 border-blue-400 hover:border-purple-500 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">1</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Initialize quantum encryption protocols. Establish secure neural pathways for data transmission across dimensional barriers.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500 to-green-400 text-gray-950 font-bold text-xl leading-loose border-2 border-purple-500 hover:border-green-400 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">2</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Execute matrix algorithms for real-time neural network optimization. Process infinite data streams simultaneously.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-green-400 to-blue-400 text-gray-950 font-bold text-xl leading-loose border-2 border-green-400 hover:border-blue-400 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">3</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Deploy advanced cybersecurity shields. Activate firewall matrices to protect against digital intrusions and viruses.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 text-gray-950 font-bold text-xl leading-loose border-2 border-blue-400 hover:border-purple-500 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">4</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Interface with global networks. Establish connection protocols for seamless integration across all digital platforms.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

How it works from FilyTreck

Tailwind CSS

FilyTreck

Dark Feature Slide with Numbered Heading, Photo, and Carousel Controls

A dark-themed feature section showing a faded step number "01", a large heading, a short paragraph, and a progress bar with previous/next circular buttons, paired with a rounded photo of people high-fiving. The layout is a split screen with text on the left and an image on the right.

<section class="relative py-16 bg-black" x-data="{ activeSlide: 1, slideCount: 3 }">
    <img class="absolute top-0 left-0 w-full h-full select-none" src="fily-assets/gradients/gradient-httpcodes2.png" alt="">
    <div class="relative container mx-auto px-4">
        <div class="py-24 md:py-36 px-10 md:px-24 bg-black rounded-3xl">
            <div class="flex flex-wrap -m-8">
                <div class="w-full md:w-1/2 p-8">
                    <div class="overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex transition-transform duration-500 ease-in-out">
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">01</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Simplicity Redefined: A Seamless and Intuitive User Experience</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">02</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Effortless Navigation for Maximum Efficiency</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                            <div class="flex-shrink-0 w-full px-4">
                                <h2 class="mb-12 font-heading text-6xl text-white text-opacity-10 font-bold">03</h2>
                                <h2 class="mb-12 text-3xl md:text-4xl text-white font-medium">Streamlined Processes for Seamless Productivity</h2>
                                <p class="mb-12 text-xl text-white font-light leading-relaxed">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center -m-7 px-4">
                        <div class="w-full md:flex-1 p-7">
                            <div class="relative bg-white bg-opacity-10 overflow-hidden rounded-full" style="height: 3px;" x-data="{ progress: 0 }" x-init="progress = 100 / slideCount">
                                <div class="absolute top-0 left-0 h-full bg-blue-500" :style="`width: ${progress * activeSlide}%`"></div>
                            </div>
                        </div>
                        <div class="w-full md:w-auto p-7">
                            <div class="flex flex-wrap justify-center md:justify-end">
                                <div class="w-auto p-2">
                                    <a href="#" x-on:click.prevent="activeSlide > 1 ? activeSlide -= 1 : activeSlide = 1" class="flex items-center justify-center w-14 h-14 text-gray-500 hover:text-white focus:text-white bg-white bg-opacity-10 hover:bg-opacity-20 focus:bg-opacity-20 focus:ring focus:ring-gray-200 rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                                <div class="w-auto p-2">
                                    <a href="#" x-on:click.prevent="activeSlide < slideCount ? activeSlide += 1 : activeSlide = slideCount" class="flex items-center justify-center w-14 h-14 text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 p-8">
                    <img class="w-full h-full object-cover rounded-3xl" style="height: 680px;" src="fily-assets/how-it-works/pic.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

How it works from Aurora

Tailwind CSS

Aurora

Asset Organization How-It-Works Section with Dashboard Preview

A marketing feature section titled 'Organize assets in 15 seconds' with a three-step numbered explainer above a framed preview of an asset management interface showing a search field, view toggles, a product image grid, and a floating action sidebar. The layout is a centered stack with a bordered preview panel below the steps.

<section class="py-12 md:py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12 sm:mb-24">
        <span class="inline-flex items-center h-6 mb-4 px-2 text-xs uppercase font-medium text-yellowGreen-700 bg-yellowGreen-200 rounded-full">HOW IT WORKS</span>
        <h1 class="font-heading tracking-tight text-4xl sm:text-5xl font-bold">Organize assets in 15 seconds</h1>
      </div>
      <div class="flex flex-wrap items-center -mx-4 mb-8">
        <div class="w-full lg:w-1/3 px-4 mb-4 lg:mb-0">
          <button class="group flex items-start text-left p-4 rounded-xl bg-transparent hover:bg-gray-50 focus:outline-none transition duration-200">
            <div class="flex-shrink-0 inline-flex w-8 h-8 mr-3 items-center justify-center font-bold bg-gray-100 group-hover:bg-white rounded-full transition duration-200">1</div>
            <p class="text-lg">
              <span class="text-gray-900 font-bold">Sign up</span>
              <span class="text-gray-500">- Setup an account with email and password.</span>
            </p>
          </button>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-4 lg:mb-0">
          <button class="group flex items-start text-left p-4 rounded-xl bg-gray-50 focus:outline-none transition duration-200">
            <div class="flex-shrink-0 inline-flex w-8 h-8 mr-3 items-center justify-center font-bold bg-white rounded-full transition duration-200">2</div>
            <p class="text-lg">
              <span class="text-gray-900 font-bold">Explore</span>
              <span class="text-gray-500">- Browse our interface to discover the features.</span>
            </p>
          </button>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <button class="group flex items-start text-left p-4 rounded-xl bg-transparent hover:bg-gray-50 focus:outline-none transition duration-200">
            <div class="flex-shrink-0 inline-flex w-8 h-8 mr-3 items-center justify-center font-bold bg-gray-100 group-hover:bg-white rounded-full transition duration-200">3</div>
            <p class="text-lg">
              <span class="text-gray-900 font-bold">Upload &amp; Organize</span>
              <span class="text-gray-500">- Drag &amp; drop your assets and organize it.</span>
            </p>
          </button>
        </div>
      </div>
      <img class="block w-full mx-auto" src="aurora-assets/how-it-works/image-center.png" alt="">
    </div>
  </div>
</section>

How it works from Consulty

Tailwind CSS

Consulty

Three-Step Process Section with Photo Cards

A centered heading and subtitle introduce a row of three photo cards numbered 01 to 03, each with a title and short body text overlaid on the image. The layout is a horizontal three-column grid used to present a sequential process.

<section class="px-8 md:px-24 pt-32 pb-40">
    <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-4">Get started with 3 steps</h1>
    <p class="tracking-tight text-center text-gray-700 text-lg mb-20">There are many variations of passages of available</p>
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="relative" style="height:518px;">
                <img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture1.png" alt="">
                <div class="absolute top-8 right-8">
                    <div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
                        <p class="tracking-tight text-lg font-semibold">01</p>
                    </div>
                </div>
                <div class="absolute bottom-8 left-9 right-9">
                    <p class="tracking-tight text-white text-2xl font-semibold mb-2">Book Time</p>
                    <p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="relative" style="height:518px;">
                <img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture2.png" alt="">
                <div class="absolute top-8 right-8">
                    <div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
                        <p class="tracking-tight text-lg font-semibold">02</p>
                    </div>
                </div>
                <div class="absolute bottom-8 left-9 right-9">
                    <p class="tracking-tight text-white text-2xl font-semibold mb-2">Meet Experts</p>
                    <p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <div class="relative" style="height:518px;">
                <img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture3.png" alt="">
                <div class="absolute top-8 right-8">
                    <div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
                        <p class="tracking-tight text-lg font-semibold">03</p>
                    </div>
                </div>
                <div class="absolute bottom-8 left-9 right-9">
                    <p class="tracking-tight text-white text-2xl font-semibold mb-2">Get Results</p>
                    <p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
                </div>
            </div>
        </div>
    </div>
</section>

How it works from Suncealand

Tailwind CSS

Suncealand

How It Works Section with App UI Mockup for Podcast Distribution

A light beige marketing section with a pill eyebrow label, serif heading "How does it work?", and body copy describing podcast distribution, followed by a cropped browser-style mockup showing collaborator avatars, a purple podcast card with Edit and Remove links, an audio player, and a dated file row.

<section class="pb-40 sm:pb-64 sm:pb-80 lg:pb-118 overflow-hidden">
  <div class="relative pt-20 md:pt-40 bg-yellowGray-500">
    <div class="container px-4 mx-auto">
      <div class="max-w-2xl pb-40 sm:pb-64 sm:pb-80 lg:pb-118 relative">
        <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
          <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
          <span class="uppercase text-sm font-medium tracking-tight">HOW IT WORKS</span>
        </div>
        <h1 class="max-w-md text-6xl sm:text-7xl xl:text-8xl font-heading mb-10">How does it work?</h1>
        <p class="text-2xl">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
      </div>
    </div>
    <img class="absolute bottom-0 right-0 pl-20 transform translate-y-1/2" src="suncealand-assets/images/computer-info-right.png" alt="">
  </div>
</section>

Show your workflow and the way you operate with Tailwind how it works components. This will help you explain the important steps of the company or department process.

Choose from many variations of Tailwind components how it works section. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Tailwind components how it works sections, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Tailwind CSS How it works Components

Framework

UI Library

Components

How it works from NEUB

Split-Screen Feature Section with Desk Photo and Numbered Points

How it works from Casper

How Does Casper Work three-step feature section

How it works from Vista

How it works three-step feature section on dark background

Your next website starts here

How it works from Cyber

Quantum Protocol Architecture Feature Section with Numbered Steps

How it works from FilyTreck

Dark Feature Slide with Numbered Heading, Photo, and Carousel Controls

How it works from Aurora

Asset Organization How-It-Works Section with Dashboard Preview

How it works from Consulty

Three-Step Process Section with Photo Cards

How it works from Suncealand

How It Works Section with App UI Mockup for Podcast Distribution

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

Extensions

UI Components

Company

Support

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS How it works Components

Framework

UI Library

Components

How it works from NEUB

Split-Screen Feature Section with Desk Photo and Numbered Points

How it works from Casper

How Does Casper Work three-step feature section

How it works from Vista

How it works three-step feature section on dark background

Your next website starts here

How it works from Cyber

Quantum Protocol Architecture Feature Section with Numbered Steps

How it works from FilyTreck

Dark Feature Slide with Numbered Heading, Photo, and Carousel Controls

How it works from Aurora

Asset Organization How-It-Works Section with Dashboard Preview

How it works from Consulty

Three-Step Process Section with Photo Cards

How it works from Suncealand

How It Works Section with App UI Mockup for Podcast Distribution

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support