Tailwind Features Components (421)

Features from Saturn

Feature Section with Centered Heading and Phone Mockup

A marketing feature section with a centered eyebrow label and two-tone serif-accented heading above a central phone mockup. Six feature items with colored circular icons and short descriptions are arranged in two columns flanking the device.

<section class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto text-center">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">FEATURES</span>
      <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900 mb-24">
        <span>Upgrade to unlock all</span>
        <span class="font-serif italic">features</span>
      </h1>
    </div>
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/5 xl:w-auto px-4 lg:pb-10 mb-16 lg:mb-0">
          <div class="mx-auto max-w-sm">
            <div class="flex items-center pb-12 mb-12 border-b border-gray-100">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-blue-100 rounded-full">
                <img src="saturn-assets/images/features/icon-element.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">Simple &amp; Uniuqe</h3>
                <span class="text-sm text-gray-400">Created by our talented designer</span>
              </div>
            </div>
            <div class="flex items-center pb-12 mb-12 border-b border-gray-100">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-orange-100 rounded-full">
                <img src="saturn-assets/images/features/icon-hierarchy.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">Layered &amp; Well Documented</h3>
                <span class="text-sm text-gray-400">The best layer organization</span>
              </div>
            </div>
            <div class="flex items-center">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-gray-300 rounded-full">
                <img src="saturn-assets/images/features/icon-school-bag.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">World Class UI Design</h3>
                <span class="text-sm text-gray-400">We are not tolerant about taste</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/5 xl:w-auto mx-auto px-4 xl:-mr-10 mb-16 lg:mb-0">
          <img class="block h-80 md:h-100 lg:h-auto xl:h-150 mx-auto" src="saturn-assets/images/features/phone-picture.png" alt="">
        </div>
        <div class="w-full lg:w-2/5 xl:w-auto px-4 lg:pb-10">
          <div class="mx-auto max-w-sm">
            <div class="flex items-center pb-12 mb-12 border-b border-gray-100">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-red-200 rounded-full">
                <img src="saturn-assets/images/features/icon-robot.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">Mobile Friendly</h3>
                <span class="text-sm text-gray-400">We create responsive website</span>
              </div>
            </div>
            <div class="flex items-center pb-12 mb-12 border-b border-gray-100">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-yellow-200 rounded-full">
                <img src="saturn-assets/images/features/icon-cam.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">Complete Style Guide</h3>
                <span class="text-sm text-gray-400">The design will be centralized</span>
              </div>
            </div>
            <div class="flex items-center">
              <div class="flex flex-shrink-0 w-15 h-15 mr-6 items-center justify-center bg-green-200 rounded-full">
                <img src="saturn-assets/images/features/icon-flask.svg" alt="">
              </div>
              <div>
                <h3 class="text-xl font-semibold">Unlimited Support</h3>
                <span class="text-sm text-gray-400">No worries, we are here to support</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from DarkPro

Tailwind CSS

DarkPro

Dark three-column feature highlights with circled icons

A horizontal row of three feature items on a dark background, each with a circled line icon, a bold heading, and short body text. It presents product benefits in a minimal, text-led layout without buttons or links.

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-8 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
            </svg>
          </span>
          <div>
            <h3 class="mb-2 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Security in saving</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
            </svg>
          </span>
          <div>
            <h3 class="mb-2 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">No errors</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-8 mb-12">
        <div class="flex">
          <span class="mr-6">
            <svg class="text-white w-12 h-12" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
              <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
            </svg>
          </span>
          <div>
            <h3 class="mb-2 text-xl md:text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Change of access</h3>
            <p class="text-neutral-300">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Flaro

Tailwind CSS

Flaro

Hero Section with Heading, Body Text, and Recent Users Card Illustration

A split-layout hero section with a bold two-line heading and short paragraph on the left, and a stacked illustrative card listing recent users, companies, and amounts on the right. The layout is a marketing introduction for the Flaro product with a light, gradient-tinted background.

<section class="relative py-32 bg-white overflow-hidden">
  <img class="absolute left-0 top-0 h-full w-full" src="flaro-assets/images/features/elipse.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h2 class="mb-6 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight">Build better customer experiences with Flaro</h2>
        <p class="font-sans text-lg text-gray-900 leading-relaxed md:max-w-lg">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <img class="w-full max-w-xl transform hover:-translate-y-16 transition ease-in-out duration-1000 rounded-2xl" src="flaro-assets/images/features/feature.png" alt="">
      </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

Features from Gradia

Tailwind CSS

Gradia

Split-screen hero with heading, feature checklist, and project manager card mockup

A light marketing hero section with a bold two-line heading, short body paragraph, and three checkmark feature bullets on the left, paired with a gradient orange-to-red panel showing a stacked card of project manager profiles on the right. The layout separates promotional text from an illustrative card graphic.

<section class="relative py-44 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full lg:w-1/2 p-6">
        <div class="lg:max-w-lg">
          <h2 class="mb-6 font-heading font-bold text-7xl text-gray-900" >Get maximum results from all your projects.</h2>
          <p class="mb-20 text-base text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
          <ul>
            <li class="mb-4 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-2" src="gradia-assets/elements/hero/check.svg" alt="">
              <p >No hidden fees</p>
            </li>
            <li class="mb-4 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-2" src="gradia-assets/elements/hero/check.svg" alt="">
              <p >Start with a free account</p>
            </li>
            <li class="mb-4 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-2" src="gradia-assets/elements/hero/check.svg" alt="">
              <p >Edit online, no software needed</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-6">
        <div class="bg-gradient-orange mx-auto max-w-lg h-96 rounded-3xl"><img class="relative top-10 mx-auto transform hover:-translate-y-16 transition ease-in-out duration-500" src="gradia-assets/images/features/dropdown.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

Features from Solstice

Tailwind CSS

Solstice

Discover our features feature grid with study room, community, summaries, events, and progress cards

A marketing feature section headed "Discover our features" that presents five illustrated cards in a mosaic layout, each showing an app screenshot or mockup for study rooms, community members, note summaries, events and discussions, and progress tracking. The section promotes a learning product through illustrative UI rather than interactive controls.

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-24">Discover our features</h1>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature1-secondary.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature2-primary2.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature3-primary2.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature4-primary.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature5-secondary.png" alt="">
      </div>
    </div>
  </div>
</section>

Features from Basko

Tailwind CSS

Basko

Three-column feature section with gradient line icons and purple text links

A three-column marketing feature section on a white background, each column showing a gradient outline icon, a bold heading, centered body text, and a purple text link. It introduces customization, brand fit, and multi-layer design capabilities.

<section class="py-24 lg:py-28 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8">
        <div class="max-w-xs mx-auto text-center">
          <img class="mx-auto mb-9" src="basko-assets/images/features/customize.png" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Customize As Needed</h3>
          <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>
          <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Start Customizing</a>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <div class="max-w-xs mx-auto text-center">
          <img class="mx-auto mb-9" src="basko-assets/images/features/smart.png" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Fits Existing Brand</h3>
          <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>
          <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Grow Brand</a>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-8">
        <div class="max-w-xs mx-auto text-center">
          <img class="mx-auto mb-9" src="basko-assets/images/features/design.png" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Multi-layer Design</h3>
          <p class="mb-8 tracking-tight">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>
          <a class="font-semibold text-indigo-500 hover:text-indigo-600 tracking-tight transition duration-200" href="#">Start Designing</a>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Zanrly

Tailwind CSS

Zanrly

Feature Section with Product Photo and Checklist Tags

A light split-layout feature section with a product photograph on the left and an eyebrow label, bold heading with blue accent, short paragraph, and four pill-shaped checkmark tags on the right. It promotes business tracking features without interactive controls visible.

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-white rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/features/business.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-4 text-4xl text-gray-900 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <p class="mb-16 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit.</p>
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="flex-1">
                    <p class="text-sm text-gray-900 font-bold">Exportable code</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="flex-1">
                    <p class="text-sm text-gray-900 font-bold">Satisfied customers</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="flex-1">
                    <p class="text-sm text-gray-900 font-bold">Easy integration</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="flex-1">
                    <p class="text-sm text-gray-900 font-bold">Responsive images</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Nightsable

Tailwind CSS

Nightsable

Dark Hero Section with Stacked Credit Card Mockup and Lime CTA

A dark promotional hero section for a credit card product, with a small lime eyebrow label, a large white headline, short supporting text, and a lime rounded call-to-action button on the left. A stacked, angled illustration of a credit card occupies the right side.

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="relative z-10 md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-6 text-7xl text-white tracking-tighter-xl">Making credit history with nightcard</h2>
          <p class="mb-10 text-white text-opacity-60 md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block px-8 py-4 tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <img class="md:mr-0" src="nightsable-assets/images/features/card.png" alt="">
      </div>
    </div>
  </div>
  <img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="nightsable-assets/images/features/bg-blur.png" alt="">
</section>

Features from Zeus

Tailwind CSS

Zeus

Six-Item Feature Grid with Colored Icon Badges

A 3x2 grid of feature items, each with a colored circular icon, bold navy heading, and gray supporting paragraph. The layout is a light-background feature section describing security, notifications, access, email, authentication, and user management.

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-teal-400 rounded-full">
            <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Security in saving</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-blue-400 rounded-full">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">No errors</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-red-400 rounded-full">
            <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.4235 7.4478V5.3008C13.4235 2.7878 11.3855 0.7498 8.87249 0.7498C6.35949 0.7388 4.31349 2.7668 4.30249 5.2808V5.3008V7.4478" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6832 19.2496H5.04224C2.94824 19.2496 1.25024 17.5526 1.25024 15.4576V11.1686C1.25024 9.07359 2.94824 7.37659 5.04224 7.37659H12.6832C14.7772 7.37659 16.4752 9.07359 16.4752 11.1686V15.4576C16.4752 17.5526 14.7772 19.2496 12.6832 19.2496Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.86304 12.2028V14.4238" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Change of access</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-orange-600 rounded-full">
            <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.9026 6.8512L12.4593 10.4642C11.6198 11.1302 10.4387 11.1302 9.59919 10.4642L5.11841 6.8512" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9089 19C18.9502 19.0084 21 16.5095 21 13.4384V6.57001C21 3.49883 18.9502 1 15.9089 1H6.09114C3.04979 1 1 3.49883 1 6.57001V13.4384C1 16.5095 3.04979 19.0084 6.09114 19H15.9089Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Weekly email updates</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-yellow-400 rounded-full">
            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.5 10.8055H1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M20.6299 6.5951V5.0821C20.6299 3.0211 18.9589 1.3501 16.8969 1.3501H15.6919" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3.37012 6.5951V5.0821C3.37012 3.0211 5.04112 1.3501 7.10312 1.3501H8.33912" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M20.6299 10.8046V14.8786C20.6299 16.9406 18.9589 18.6116 16.8969 18.6116H15.6919" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3.37012 10.8046V14.8786C3.37012 16.9406 5.04112 18.6116 7.10312 18.6116H8.33912" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">Frequent authentication</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-6 bg-gray-900 rounded-full">
            <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.8877 7.89673C18.2827 7.70073 19.3567 6.50473 19.3597 5.05573C19.3597 3.62773 18.3187 2.44373 16.9537 2.21973" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M18.7285 11.2502C20.0795 11.4522 21.0225 11.9252 21.0225 12.9002C21.0225 13.5712 20.5785 14.0072 19.8605 14.2812" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8867 11.6638C7.67273 11.6638 4.92773 12.1508 4.92773 14.0958C4.92773 16.0398 7.65573 16.5408 10.8867 16.5408C14.1007 16.5408 16.8447 16.0588 16.8447 14.1128C16.8447 12.1668 14.1177 11.6638 10.8867 11.6638Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8869 8.88788C12.9959 8.88788 14.7059 7.17888 14.7059 5.06888C14.7059 2.95988 12.9959 1.24988 10.8869 1.24988C8.7779 1.24988 7.0679 2.95988 7.0679 5.06888C7.0599 7.17088 8.7569 8.88088 10.8589 8.88788H10.8869Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.88484 7.89673C3.48884 7.70073 2.41584 6.50473 2.41284 5.05573C2.41284 3.62773 3.45384 2.44373 4.81884 2.21973" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3.044 11.2502C1.693 11.4522 0.75 11.9252 0.75 12.9002C0.75 13.5712 1.194 14.0072 1.912 14.2812" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-2xl font-semibold font-heading">List of regular users</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Zospace

Tailwind CSS

Zospace

Four-column feature row with colored icon tiles

A dark-background horizontal row of four feature items, each with a colored square icon tile, a thin divider, a bold heading, and short body text. The layout is a simple four-column grid used to introduce distinct features.

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
  <div class="absolute h-40 w-40 bg-blue-500 bottom-0 right-0 -mr-20 -mb-20 rounded-full"></div>
  <div class="container px-4 mx-auto">
    <div>
      <div class="flex flex-wrap -mx-6 lg:-mx-8">
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8 mb-20 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-blue-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M22.6042 34.9999H2.1875C0.981458 34.9999 0 34.0185 0 32.8124V12.3958C0 11.1897 0.981458 10.2083 2.1875 10.2083H22.6042C23.8102 10.2083 24.7917 11.1897 24.7917 12.3958V32.8124C24.7917 34.0185 23.8102 34.9999 22.6042 34.9999ZM2.1875 11.6666C1.78646 11.6666 1.45833 11.9933 1.45833 12.3958V32.8124C1.45833 33.2149 1.78646 33.5416 2.1875 33.5416H22.6042C23.0052 33.5416 23.3333 33.2149 23.3333 32.8124V12.3958C23.3333 11.9933 23.0052 11.6666 22.6042 11.6666H2.1875Z" fill="white"></path>
                <path d="M34.2702 5.83333C33.8677 5.83333 33.541 5.50667 33.541 5.10417V3.64583C33.541 2.43979 32.5596 1.45833 31.3535 1.45833H29.8952C29.4927 1.45833 29.166 1.13167 29.166 0.729167C29.166 0.326667 29.4927 0 29.8952 0H31.3535C33.3646 0 34.9993 1.63625 34.9993 3.64583V5.10417C34.9993 5.50667 34.6727 5.83333 34.2702 5.83333Z" fill="white"></path>
                <path d="M6.56217 5.83333C6.15967 5.83333 5.83301 5.50667 5.83301 5.10417V3.64583C5.83301 1.63625 7.4678 0 9.47884 0H10.9372C11.3397 0 11.6663 0.326667 11.6663 0.729167C11.6663 1.13167 11.3397 1.45833 10.9372 1.45833H9.47884C8.2728 1.45833 7.29134 2.43979 7.29134 3.64583V5.10417C7.29134 5.50667 6.96467 5.83333 6.56217 5.83333Z" fill="white"></path>
                <path d="M24.0618 1.45833H16.7702C16.3677 1.45833 16.041 1.13167 16.041 0.729167C16.041 0.326667 16.3677 0 16.7702 0H24.0618C24.4643 0 24.791 0.326667 24.791 0.729167C24.791 1.13167 24.4643 1.45833 24.0618 1.45833Z" fill="white"></path>
                <path d="M31.3535 29.1666H29.8952C29.4927 29.1666 29.166 28.8399 29.166 28.4374C29.166 28.0349 29.4927 27.7083 29.8952 27.7083H31.3535C32.5596 27.7083 33.541 26.7268 33.541 25.5208V24.0624C33.541 23.6599 33.8677 23.3333 34.2702 23.3333C34.6727 23.3333 34.9993 23.6599 34.9993 24.0624V25.5208C34.9993 27.5303 33.3646 29.1666 31.3535 29.1666Z" fill="white"></path>
                <path d="M34.2702 18.9583C33.8677 18.9583 33.541 18.6316 33.541 18.2291V10.9374C33.541 10.5349 33.8677 10.2083 34.2702 10.2083C34.6727 10.2083 34.9994 10.5349 34.9994 10.9374V18.2291C34.9994 18.6316 34.6727 18.9583 34.2702 18.9583Z" fill="white"></path>
              </g>
            </svg>
          </span>
          <div class="pb-px mb-12 bg-gray-500"></div>
          <h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Backups</h3>
          <p class="text-lg text-gray-200">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8 mb-20 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-violet-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M24.0625 18.9583C23.7402 18.9583 23.431 18.8927 23.1467 18.7615L17.5 16.1175L11.8592 18.7585C11.569 18.8927 11.2598 18.9583 10.9375 18.9583C9.73146 18.9583 8.75 17.9769 8.75 16.7708C8.75 16.4529 8.81417 16.1583 8.94833 15.8681L15.5079 1.28917C15.8419 0.510417 16.6265 0 17.5 0C18.3735 0 19.1581 0.510417 19.4965 1.30083L26.0546 15.874C26.1858 16.1583 26.25 16.4529 26.25 16.7708C26.25 17.9769 25.2685 18.9583 24.0625 18.9583ZM17.5 14.5833C17.605 14.5833 17.7115 14.6067 17.8092 14.6519L23.7592 17.4373C24.166 17.6225 24.7917 17.2856 24.7917 16.7708C24.7917 16.6629 24.7712 16.5754 24.7275 16.4763L18.1621 1.88854C17.9346 1.35771 17.061 1.36792 16.8423 1.87833L10.2754 16.4719C10.2287 16.5754 10.2083 16.6629 10.2083 16.7708C10.2083 17.2856 10.8092 17.6327 11.2467 17.4358L17.1908 14.6533C17.2885 14.6067 17.395 14.5833 17.5 14.5833Z" fill="white"></path>
                <path d="M17.4997 35C8.65488 35 1.45801 27.8031 1.45801 18.9583C1.45801 12.9194 4.7903 7.46227 10.154 4.71769C10.507 4.53685 10.9518 4.6754 11.1355 5.0356C11.3193 5.3929 11.1763 5.83331 10.8176 6.0156C5.94384 8.50936 2.91634 13.4691 2.91634 18.9583C2.91634 26.9996 9.45842 33.5417 17.4997 33.5417C25.5409 33.5417 32.083 26.9996 32.083 18.9583C32.083 13.4794 29.0613 8.51956 24.1963 6.0156C23.8376 5.83185 23.6961 5.39144 23.8813 5.03414C24.0665 4.67539 24.507 4.53539 24.8628 4.7206C30.2163 7.47394 33.5413 12.931 33.5413 18.9583C33.5413 27.8031 26.3445 35 17.4997 35Z" fill="white"></path>
              </g>
            </svg>
          </span>
          <div class="pb-px mb-12 bg-gray-500"></div>
          <h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Navigation</h3>
          <p class="text-lg text-gray-200">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8 mb-10 lg:mb-0">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-green-500 rounded-lg">
            <svg class="w-8 h-8" width="36" height="35" viewBox="0 0 36 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M32.25 35H5.25C3.183 35 1.5 33.3638 1.5 31.3542V3.64588C1.5 3.24338 1.836 2.91672 2.25 2.91672C2.664 2.91672 3 3.24338 3 3.64588V31.3542C3 32.5603 4.0095 33.5417 5.25 33.5417H31.5V6.56255C31.5 6.16005 31.836 5.83338 32.25 5.83338C32.664 5.83338 33 6.16005 33 6.56255V34.2709C33 34.6734 32.664 35 32.25 35Z" fill="white"></path>
                <path d="M32.25 7.29167H5.25C3.183 7.29167 1.5 5.65542 1.5 3.64583C1.5 1.63625 3.183 0 5.25 0H29.25C29.664 0 30 0.326667 30 0.729167V5.83333H32.25C32.664 5.83333 33 6.16 33 6.5625C33 6.965 32.664 7.29167 32.25 7.29167ZM5.25 1.45833C4.0095 1.45833 3 2.43979 3 3.64583C3 4.85187 4.0095 5.83333 5.25 5.83333H28.5V1.45833H5.25Z" fill="white"></path>
                <path d="M12.9868 27.7055C12.2338 27.7055 11.6158 27.4897 11.1718 27.0566C10.2898 26.1991 10.2808 24.6838 11.1478 22.7866C11.9158 21.1051 13.3018 19.2443 15.0478 17.5482C16.7938 15.8507 18.7063 14.5047 20.4358 13.7565C22.3858 12.9122 23.9443 12.9209 24.8278 13.7799C25.7098 14.6374 25.7188 16.154 24.8518 18.0499C24.0838 19.7313 22.6978 21.5922 20.9518 23.2882C19.2058 24.9857 17.2933 26.3318 15.5638 27.0799C14.5963 27.4955 13.7263 27.7055 12.9868 27.7055ZM23.0143 14.582C22.5043 14.582 21.8188 14.754 21.0448 15.088C19.4803 15.7647 17.7268 17.0043 16.1068 18.5778C14.4868 20.1513 13.2148 21.8561 12.5188 23.3772C11.9488 24.627 11.8378 25.6405 12.2323 26.024C12.6268 26.4076 13.6693 26.2997 14.9548 25.7455C16.5193 25.0688 18.2728 23.8293 19.8928 22.2557C21.5128 20.6822 22.7863 18.9774 23.4823 17.4549C24.0523 16.2051 24.1633 15.1916 23.7688 14.808C23.6113 14.6563 23.3503 14.582 23.0143 14.582Z" fill="white"></path>
                <path d="M23.0128 27.7054C22.2733 27.7054 21.4033 27.4969 20.4358 27.0784C18.7063 26.3317 16.7923 24.9842 15.0478 23.2867C13.3018 21.5892 11.9173 19.7298 11.1478 18.0484C10.2808 16.1525 10.2898 14.6359 11.1718 13.7784C12.0523 12.9209 13.6138 12.9121 15.5638 13.755C17.2933 14.5017 19.2073 15.8492 20.9518 17.5467C22.6978 19.2442 24.0823 21.1036 24.8518 22.785C25.7188 24.6823 25.7098 26.1975 24.8278 27.055C24.3838 27.4882 23.7658 27.7054 23.0128 27.7054ZM12.9853 14.5819C12.6478 14.5819 12.3898 14.6563 12.2323 14.8094C11.8378 15.1929 11.9488 16.2065 12.5188 17.4563C13.2148 18.9773 14.4898 20.6821 16.1083 22.2571C17.7268 23.8321 19.4803 25.0702 21.0463 25.7469C22.3318 26.3025 23.3743 26.4075 23.7688 26.0254C24.1633 25.6419 24.0523 24.6284 23.4823 23.3786C22.7863 21.8575 21.5113 20.1527 19.8928 18.5777C18.2743 17.0027 16.5208 15.7646 14.9548 15.0879C14.1808 14.754 13.4953 14.5819 12.9853 14.5819ZM11.7013 14.2932H11.7163H11.7013Z" fill="white"></path>
              </g>
            </svg>
          </span>
          <div class="pb-px mb-12 bg-gray-500"></div>
          <h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Documents</h3>
          <p class="text-lg text-gray-200">The time, this accumsan augue, posuere posuere elit lorem.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-6 lg:px-8">
          <span class="flex mb-10 justify-center items-center w-20 h-20 bg-pink-500 rounded-lg">
            <svg class="w-8 h-8" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0618 13.1249C24.0618 12.8935 23.952 12.6758 23.766 12.5384C23.5797 12.4009 23.3394 12.3599 23.1183 12.428L14.3682 15.1203C14.0623 15.2144 13.8535 15.4972 13.8535 15.8173V21.536C13.4245 21.2878 12.9264 21.1457 12.3952 21.1457C10.7844 21.1457 9.47852 22.4515 9.47852 24.0624C9.47852 25.6733 10.7844 26.9791 12.3952 26.9791C14.0044 26.9791 15.3092 25.6758 15.3118 24.0671V24.0624V16.3557L22.6035 14.1122V20.0777C22.1745 19.8294 21.6765 19.6874 21.1452 19.6874C19.5343 19.6874 18.2285 20.9932 18.2285 22.6041C18.2285 24.2149 19.5343 25.5207 21.1452 25.5207C22.7545 25.5207 24.0592 24.2174 24.0618 22.6087V22.6041V13.1249ZM22.6035 22.6041C22.6035 21.7986 21.9506 21.1457 21.1452 21.1457C20.3397 21.1457 19.6868 21.7986 19.6868 22.6041C19.6868 23.4095 20.3397 24.0624 21.1452 24.0624C21.9506 24.0624 22.6035 23.4095 22.6035 22.6041ZM12.3952 22.6041C11.5898 22.6041 10.9368 23.257 10.9368 24.0624C10.9368 24.8678 11.5898 25.5207 12.3952 25.5207C13.2006 25.5207 13.8535 24.8678 13.8535 24.0624C13.8535 23.257 13.2006 22.6041 12.3952 22.6041Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.208 3.64577C8.19447 3.64577 6.56217 5.27807 6.56217 7.2916V8.0937C4.89804 8.43149 3.64551 9.90278 3.64551 11.6666V27.7083C3.64551 29.7218 5.27781 31.3541 7.29134 31.3541H27.708C29.7215 31.3541 31.3538 29.7218 31.3538 27.7083V11.6666C31.3538 9.90278 30.1013 8.43149 28.4372 8.0937V7.2916C28.4372 5.27807 26.8049 3.64577 24.7913 3.64577H10.208ZM26.9788 8.02077V7.2916C26.9788 6.08347 25.9994 5.1041 24.7913 5.1041H10.208C8.99988 5.1041 8.02051 6.08347 8.02051 7.2916V8.02077H26.9788ZM7.29134 9.4791C6.08321 9.4791 5.10384 10.4585 5.10384 11.6666V27.7083C5.10384 28.9163 6.08321 29.8958 7.29134 29.8958H27.708C28.9161 29.8958 29.8955 28.9163 29.8955 27.7083V11.6666C29.8955 10.4585 28.9161 9.4791 27.708 9.4791H7.29134Z" fill="white"></path>
            </svg>
          </span>
          <div class="pb-px mb-12 bg-gray-500"></div>
          <h3 class="mt-12 mb-8 text-lg font-bold font-heading text-white">Weekly updates</h3>
          <p class="text-lg text-gray-200">Again and again vehicula libero at nibh volutpat lacinia non sed you see.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Wrexa

Tailwind CSS

Wrexa

Four-Card Furniture Promo Row with Arrow Links

A horizontal row of four white rounded cards on a light gray background, each containing a short promotional headline and a diagonal arrow icon in the lower right, suggesting clickable teasers for furniture collections. The layout is a single row of evenly spaced cards with the first card slightly raised.

<section class="py-24 md:py-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-end -mx-4">
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8 xl:mb-0">
        <a class="max-w-sm mx-auto flex flex-col pt-12 px-12 bg-white rounded-md" href="#">
          <h5 class="font-heading text-xl mb-14">Comfort like you've never experienced before.</h5>
          <div class="text-right mt-auto pb-10">
            <span class="inline-block">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="black"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8 xl:mb-0">
        <a class="max-w-sm mx-auto flex flex-col pt-12 px-12 bg-white rounded-md" href="#">
          <h5 class="max-w-xs 3xl:pr-10 font-heading text-xl mb-8">Create design and furniture</h5>
          <div class="text-right mt-auto pb-10">
            <span class="inline-block">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="black"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8 md:mb-0">
        <a class="max-w-sm mx-auto flex flex-col pt-12 px-12 bg-white rounded-md" href="#">
          <h5 class="max-w-xs 3xl:pr-10 font-heading text-xl mb-8">New in: Modular Design</h5>
          <div class="text-right mt-auto pb-10">
            <span class="inline-block">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="black"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4">
        <a class="max-w-sm mx-auto flex flex-col pt-12 px-12 bg-white rounded-md" href="#">
          <h5 class="max-w-xs 3xl:pr-10 font-heading text-xl mb-8">Make every day feel like Sunday</h5>
          <div class="text-right mt-auto pb-10">
            <span class="inline-block">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="black"></path>
              </svg>
            </span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

Features from Flex

Tailwind CSS

Flex

Feature Grid with Green Icon Tiles for CRM Capabilities

A marketing feature section with a small FEATURES badge, a centered two-line heading, and supporting text above a 3x2 grid of features. Each feature has a green rounded icon tile, a bold title, and short centered description text on a light background.

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 md:pb-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-4xl mb-12 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="24" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Measure your performance</h3>
            <p class="text-coolGray-500 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="22" height="12" viewbox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.71 1.29C20.617 1.19627 20.5064 1.12188 20.3846 1.07111C20.2627 1.02034 20.132 0.994202 20 0.994202C19.868 0.994202 19.7373 1.02034 19.6154 1.07111C19.4936 1.12188 19.383 1.19627 19.29 1.29L13 7.59L8.71 3.29C8.61704 3.19627 8.50644 3.12188 8.38458 3.07111C8.26272 3.02034 8.13201 2.9942 8 2.9942C7.86799 2.9942 7.73728 3.02034 7.61542 3.07111C7.49356 3.12188 7.38296 3.19627 7.29 3.29L1.29 9.29C1.19627 9.38296 1.12188 9.49356 1.07111 9.61542C1.02034 9.73728 0.994202 9.86799 0.994202 10C0.994202 10.132 1.02034 10.2627 1.07111 10.3846C1.12188 10.5064 1.19627 10.617 1.29 10.71C1.38296 10.8037 1.49356 10.8781 1.61542 10.9289C1.73728 10.9797 1.86799 11.0058 2 11.0058C2.13201 11.0058 2.26272 10.9797 2.38458 10.9289C2.50644 10.8781 2.61704 10.8037 2.71 10.71L8 5.41L12.29 9.71C12.383 9.80373 12.4936 9.87812 12.6154 9.92889C12.7373 9.97966 12.868 10.0058 13 10.0058C13.132 10.0058 13.2627 9.97966 13.3846 9.92889C13.5064 9.87812 13.617 9.80373 13.71 9.71L20.71 2.71C20.8037 2.61704 20.8781 2.50644 20.9289 2.38458C20.9797 2.26272 21.0058 2.13201 21.0058 2C21.0058 1.86799 20.9797 1.73728 20.9289 1.61542C20.8781 1.49356 20.8037 1.38296 20.71 1.29Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Custom analytics</h3>
            <p class="text-coolGray-500 font-medium">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="22" height="18" viewbox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Team Management</h3>
            <p class="text-coolGray-500 font-medium">Our calendar lets you know what is happening with customer and projects so you</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Build your website</h3>
            <p class="text-coolGray-500 font-medium">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Connect multiple apps</h3>
            <p class="text-coolGray-500 font-medium">The first business platform to bring together all of your products from one place.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="h-full p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.32 7.55L17.43 6.92L18.32 5.14C18.4102 4.95369 18.4404 4.74397 18.4064 4.53978C18.3723 4.33558 18.2758 4.14699 18.13 4L16 1.87C15.8522 1.72209 15.6618 1.62421 15.4555 1.59013C15.2493 1.55605 15.0375 1.58748 14.85 1.68L13.07 2.57L12.44 0.680003C12.3735 0.482996 12.2472 0.311629 12.0787 0.189751C11.9102 0.0678737 11.7079 0.00154767 11.5 3.33354e-06H8.5C8.29036 -0.000537828 8.08585 0.0648223 7.91537 0.186845C7.7449 0.308868 7.61709 0.481382 7.55 0.680003L6.92 2.57L5.14 1.68C4.95369 1.58978 4.74397 1.55961 4.53978 1.59364C4.33558 1.62767 4.14699 1.72423 4 1.87L1.87 4C1.72209 4.14777 1.62421 4.33818 1.59013 4.54446C1.55605 4.75074 1.58748 4.96251 1.68 5.15L2.57 6.93L0.680003 7.56C0.482996 7.62654 0.311629 7.75283 0.189751 7.92131C0.0678737 8.08979 0.00154767 8.29207 3.33354e-06 8.5V11.5C-0.000537828 11.7096 0.0648223 11.9142 0.186845 12.0846C0.308868 12.2551 0.481382 12.3829 0.680003 12.45L2.57 13.08L1.68 14.86C1.58978 15.0463 1.55961 15.256 1.59364 15.4602C1.62767 15.6644 1.72423 15.853 1.87 16L4 18.13C4.14777 18.2779 4.33818 18.3758 4.54446 18.4099C4.75074 18.444 4.96251 18.4125 5.15 18.32L6.93 17.43L7.56 19.32C7.62709 19.5186 7.7549 19.6911 7.92537 19.8132C8.09585 19.9352 8.30036 20.0005 8.51 20H11.51C11.7196 20.0005 11.9242 19.9352 12.0946 19.8132C12.2651 19.6911 12.3929 19.5186 12.46 19.32L13.09 17.43L14.87 18.32C15.0551 18.4079 15.2628 18.4369 15.4649 18.4029C15.667 18.3689 15.8538 18.2737 16 18.13L18.13 16C18.2779 15.8522 18.3758 15.6618 18.4099 15.4555C18.444 15.2493 18.4125 15.0375 18.32 14.85L17.43 13.07L19.32 12.44C19.517 12.3735 19.6884 12.2472 19.8103 12.0787C19.9321 11.9102 19.9985 11.7079 20 11.5V8.5C20.0005 8.29036 19.9352 8.08585 19.8132 7.91537C19.6911 7.7449 19.5186 7.61709 19.32 7.55ZM18 10.78L16.8 11.18C16.5241 11.2695 16.2709 11.418 16.0581 11.6151C15.8452 11.8122 15.6778 12.0533 15.5675 12.3216C15.4571 12.5899 15.4064 12.879 15.419 13.1688C15.4315 13.4586 15.5069 13.7422 15.64 14L16.21 15.14L15.11 16.24L14 15.64C13.7436 15.5122 13.4627 15.4411 13.1763 15.4313C12.89 15.4215 12.6049 15.4734 12.3403 15.5834C12.0758 15.6934 11.8379 15.8589 11.6429 16.0688C11.4479 16.2787 11.3003 16.5281 11.21 16.8L10.81 18H9.22L8.82 16.8C8.73049 16.5241 8.58203 16.2709 8.3849 16.0581C8.18778 15.8452 7.94671 15.6778 7.67842 15.5675C7.41014 15.4571 7.12105 15.4064 6.83123 15.419C6.5414 15.4315 6.25777 15.5069 6 15.64L4.86 16.21L3.76 15.11L4.36 14C4.4931 13.7422 4.56852 13.4586 4.58105 13.1688C4.59358 12.879 4.5429 12.5899 4.43254 12.3216C4.32218 12.0533 4.15478 11.8122 3.94195 11.6151C3.72912 11.418 3.47595 11.2695 3.2 11.18L2 10.78V9.22L3.2 8.82C3.47595 8.73049 3.72912 8.58203 3.94195 8.3849C4.15478 8.18778 4.32218 7.94671 4.43254 7.67842C4.5429 7.41014 4.59358 7.12105 4.58105 6.83123C4.56852 6.5414 4.4931 6.25777 4.36 6L3.79 4.89L4.89 3.79L6 4.36C6.25777 4.4931 6.5414 4.56852 6.83123 4.58105C7.12105 4.59358 7.41014 4.5429 7.67842 4.43254C7.94671 4.32218 8.18778 4.15478 8.3849 3.94195C8.58203 3.72912 8.73049 3.47595 8.82 3.2L9.22 2H10.78L11.18 3.2C11.2695 3.47595 11.418 3.72912 11.6151 3.94195C11.8122 4.15478 12.0533 4.32218 12.3216 4.43254C12.5899 4.5429 12.879 4.59358 13.1688 4.58105C13.4586 4.56852 13.7422 4.4931 14 4.36L15.14 3.79L16.24 4.89L15.64 6C15.5122 6.25645 15.4411 6.53735 15.4313 6.82369C15.4215 7.11003 15.4734 7.39513 15.5834 7.65969C15.6934 7.92424 15.8589 8.16207 16.0688 8.35708C16.2787 8.5521 16.5281 8.69973 16.8 8.79L18 9.19V10.78ZM10 6C9.20888 6 8.43552 6.2346 7.77772 6.67413C7.11993 7.11365 6.60724 7.73836 6.30448 8.46927C6.00173 9.20017 5.92252 10.0044 6.07686 10.7804C6.2312 11.5563 6.61217 12.269 7.17158 12.8284C7.73099 13.3878 8.44372 13.7688 9.21964 13.9231C9.99557 14.0775 10.7998 13.9983 11.5307 13.6955C12.2616 13.3928 12.8864 12.8801 13.3259 12.2223C13.7654 11.5645 14 10.7911 14 10C14 8.93914 13.5786 7.92172 12.8284 7.17158C12.0783 6.42143 11.0609 6 10 6ZM10 12C9.60444 12 9.21776 11.8827 8.88886 11.6629C8.55996 11.4432 8.30362 11.1308 8.15224 10.7654C8.00087 10.3999 7.96126 9.99778 8.03843 9.60982C8.1156 9.22186 8.30608 8.86549 8.58579 8.58579C8.86549 8.30608 9.22186 8.1156 9.60982 8.03843C9.99778 7.96126 10.3999 8.00087 10.7654 8.15224C11.1308 8.30362 11.4432 8.55996 11.6629 8.88886C11.8827 9.21776 12 9.60444 12 10C12 10.5304 11.7893 11.0391 11.4142 11.4142C11.0391 11.7893 10.5304 12 10 12Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Easy setup</h3>
            <p class="text-coolGray-500 font-medium">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wave wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

Features from Uinel

Tailwind CSS

Uinel

Four-column feature highlights with orange icon tiles

A horizontal row of four feature items on a light blue-gray rounded panel, each with an orange rounded icon tile, a bold heading, and centered gray supporting text. It presents product capabilities such as Helpdesk, multi-device support, a voice plugin, and direct messages.

<section class="font-medium bg-blueGray-100 rounded-b-10xl py-24 2xl:pt-52 2xl:pb-40">
  <div class="container px-4 mx-auto">
    <div class="grid md:grid-cols-2 lg:grid-cols-4 justify-center gap-16 xl:gap-40">
      <div class="max-w-sm mx-auto text-center">
        <img class="w-18 h-18 mb-10 mx-auto" src="uinel-assets/elements/features/helpdesk.svg" alt="">
        <h3 class="mb-10 font-heading text-5xl leading-loose">Helpdesk</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin, mattis mi in, tristique ex.</p>
      </div>
      <div class="max-w-sm mx-auto text-center">
        <img class="w-18 h-18 mb-10 mx-auto" src="uinel-assets/elements/features/devices.svg" alt="">
        <h3 class="mb-10 font-heading text-5xl leading-loose">3+ devices</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">The nulla come commodo eros sit tristique lectus</p>
      </div>
      <div class="max-w-sm mx-auto text-center">
        <img class="w-18 h-18 mb-10 mx-auto" src="uinel-assets/elements/features/plugin.svg" alt="">
        <h3 class="mb-10 font-heading text-5xl leading-loose">Voice plugin</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Nam ipsum augue, eleifend elementum velit a, mattis sollicitudin</p>
      </div>
      <div class="max-w-sm mx-auto text-center">
        <img class="w-18 h-18 mb-10 mx-auto" src="uinel-assets/elements/features/messages.svg" alt="">
        <h3 class="mb-10 font-heading text-5xl leading-loose">D.Messages</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Vestibulum non odio non dui fermentum mattis.</p>
      </div>
    </div>
  </div>
</section>

Features from Yofte

Tailwind CSS

Yofte

Four-column service benefits strip with icons

A horizontal row of four service highlights, each with a white circular icon, bold heading, and short supporting line covering free shipping, secure shopping, customer satisfaction, and 24/7 support. Dotted connector lines link the icons, and a thin divider sits below on a light gray background.

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 pb-20 border-b">
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 lg:mb-0">
        <img class="hidden md:block absolute top-0 left-1/2 ml-16 lg:ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="37" height="27" viewBox="0 0 37 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M34.9845 6.67016C33.7519 5.33682 32 4.60814 30.0543 4.60814H24.9767V1.75543C24.9767 1.2438 24.5581 0.825195 24.0465 0.825195H0.930233C0.418605 0.825195 0 1.2438 0 1.75543V22.2128C0 22.7244 0.418605 23.143 0.930233 23.143H4.63566C4.93798 24.864 6.43411 26.174 8.24031 26.174C10.0465 26.174 11.5426 24.864 11.845 23.143H24.0465H26.0853C26.3876 24.864 27.8837 26.174 29.6899 26.174C31.4961 26.174 32.9922 24.864 33.2946 23.143H36.0698C36.5814 23.143 37 22.7244 37 22.2128V12.6004C36.9922 10.143 36.3023 8.08876 34.9845 6.67016ZM1.86047 2.68566H23.1163V5.53837V21.2903H11.6822C11.1783 19.8795 9.82171 18.864 8.24031 18.864C6.65892 18.864 5.30233 19.8795 4.79845 21.2903H1.86047V2.68566ZM8.24031 24.3136C7.24806 24.3136 6.44186 23.5074 6.44186 22.5151C6.44186 21.5229 7.24806 20.7167 8.24031 20.7167C9.23256 20.7167 10.0388 21.5229 10.0388 22.5151C10.0388 23.5074 9.23256 24.3136 8.24031 24.3136ZM29.6899 24.3136C28.6977 24.3136 27.8915 23.5074 27.8915 22.5151C27.8915 21.5229 28.6977 20.7167 29.6899 20.7167C30.6822 20.7167 31.4884 21.5229 31.4884 22.5151C31.4884 23.5074 30.6822 24.3136 29.6899 24.3136ZM35.1318 21.2826H33.1318C32.6279 19.8717 31.2713 18.8562 29.6899 18.8562C28.1085 18.8562 26.7519 19.8717 26.2481 21.2826H24.9845V6.46861H30.062C33.1938 6.46861 35.1395 8.81744 35.1395 12.6004V21.2826H35.1318Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Free Shipping</h3>
          <p>From $45</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 lg:mb-0">
        <img class="hidden lg:block absolute top-0 left-1/2 ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M33.7601 6.67776C30.3819 3.38616 25.8883 1.57227 21.1139 1.57227C16.2512 1.57227 11.7014 3.44089 8.30713 6.83414C7.93802 7.20161 7.94604 7.79581 8.32318 8.16329C8.70032 8.52294 9.31017 8.51512 9.68731 8.14765C12.7205 5.12188 16.7727 3.45653 21.1139 3.45653C29.9165 3.44871 37.0742 10.4228 37.0742 18.9998C37.0742 27.5767 29.9165 34.5508 21.1139 34.5508C12.3113 34.5508 5.15359 27.5767 5.15359 18.9998V18.8043L6.7424 20.3524C6.92696 20.5322 7.17571 20.626 7.42446 20.626C7.67322 20.626 7.91395 20.5322 8.10653 20.3524C8.48367 19.9849 8.48367 19.3907 8.10653 19.0232L4.88077 15.8724C4.50363 15.5049 3.89378 15.5049 3.51664 15.8724L0.282856 19.0232C-0.0942853 19.3907 -0.0942853 19.9849 0.282856 20.3524C0.467414 20.5322 0.716167 20.626 0.96492 20.626C1.21367 20.626 1.4544 20.5322 1.64698 20.3524L3.23579 18.8043V18.9998C3.23579 23.6518 5.09742 28.0302 8.47565 31.3218C11.8539 34.6134 16.3475 36.4273 21.1219 36.4273C25.8964 36.4273 30.39 34.6134 33.7682 31.3218C37.1464 28.0302 39 23.6518 39 18.9998C39 14.3477 37.1384 9.96937 33.7601 6.67776Z" fill="black"></path>
                <path d="M21.1143 8.86719C17.9848 8.86719 15.4411 11.3457 15.4411 14.3949V17.061H13.6758C13.1462 17.061 12.7129 17.4832 12.7129 17.9992V27.358C12.7129 27.874 13.1462 28.2962 13.6758 28.2962H28.5608C29.0904 28.2962 29.5238 27.874 29.5238 27.358V18.007C29.5238 17.491 29.0904 17.0688 28.5608 17.0688H26.7955V14.4027C26.7955 11.3535 24.2438 8.86719 21.1143 8.86719ZM17.367 14.4027C17.367 12.3855 19.0521 10.7515 21.1143 10.7515C23.1766 10.7515 24.8617 12.3933 24.8617 14.4027V17.0688H17.367V14.4027ZM27.5979 26.4198H14.6387V18.9375H27.5979V26.4198Z" fill="black"></path>
              </g>
              <defs><clipPath id="clip0"><rect width="39" height="38" fill="white"></rect></clipPath></defs>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Secure Shopping</h3>
          <p>100% Guarantee</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-16 md:mb-0">
        <img class="hidden md:block absolute top-0 left-1/2 ml-16 lg:ml-8" src="yofte-assets/elements/dots.svg" alt="">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="31" height="37" viewBox="0 0 31 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.59532 15.0855C9.59532 14.5814 9.18285 14.1689 8.67872 14.1689H1.33066C0.826531 14.1689 0.414062 14.5814 0.414062 15.0855C0.414062 15.5897 0.826531 16.0021 1.33066 16.0021H8.67872C9.18285 16.0021 9.59532 15.5897 9.59532 15.0855Z" fill="black"></path>
              <path d="M29.669 14.1689H22.3209C21.8168 14.1689 21.4043 14.5814 21.4043 15.0855C21.4043 15.5897 21.8168 16.0021 22.3209 16.0021H29.669C30.1731 16.0021 30.5856 15.5897 30.5856 15.0855C30.5856 14.5814 30.1807 14.1689 29.669 14.1689Z" fill="black"></path>
              <path d="M15.4996 9.18126C16.0037 9.18126 16.4162 8.76879 16.4162 8.26466V0.916598C16.4162 0.412469 16.0037 0 15.4996 0C14.9955 0 14.583 0.412469 14.583 0.916598V8.26466C14.583 8.76879 14.9955 9.18126 15.4996 9.18126Z" fill="black"></path>
              <path d="M20.3199 11.1823C20.5567 11.1823 20.7858 11.0906 20.9691 10.915L26.1708 5.71327C26.5298 5.35427 26.5298 4.77376 26.1708 4.41476C25.8118 4.05576 25.2313 4.05576 24.8723 4.41476L19.6706 9.61645C19.3116 9.97545 19.3116 10.556 19.6706 10.915C19.8539 11.0906 20.0907 11.1823 20.3199 11.1823Z" fill="black"></path>
              <path d="M10.0305 10.915C10.2062 11.0906 10.443 11.1823 10.6798 11.1823C10.9166 11.1823 11.1457 11.0906 11.329 10.915C11.688 10.556 11.688 9.97545 11.329 9.61645L6.12733 4.41476C5.76833 4.05576 5.18782 4.05576 4.82882 4.41476C4.46982 4.77376 4.46982 5.35427 4.82882 5.71327L10.0305 10.915Z" fill="black"></path>
              <path d="M26.8398 21.178C26.1447 20.5822 25.2663 20.2537 24.3726 20.2537H23.5401H20.5458H19.1251V16.5491C19.1251 14.777 18.5981 13.4862 17.5516 12.7147C15.9017 11.5078 13.6637 12.1877 13.5644 12.2182C13.1825 12.3404 12.9228 12.6918 12.9228 13.089V17.5574C12.9228 18.917 12.2735 20.0704 10.9827 20.9946C10.005 21.6974 9.00434 22.0182 8.87448 22.0564L8.78282 22.0793C8.4391 21.6897 7.93497 21.4453 7.36974 21.4453H3.88666C2.84785 21.4453 2 22.2932 2 23.332V34.7589C2 35.7977 2.84785 36.6456 3.88666 36.6456H7.38501C7.84331 36.6456 8.27106 36.4775 8.59187 36.2025C9.29459 36.89 10.2494 37.3101 11.2806 37.3101H14.756H15.115H22.2263C23.3262 37.3101 24.2962 37.0427 25.0372 36.5463C25.9843 35.9046 26.5725 34.8887 26.7405 33.5902L28.1536 24.8062C28.3751 23.4465 27.871 22.0564 26.8398 21.178ZM7.43848 34.7589C7.43848 34.7894 7.41557 34.8124 7.38501 34.8124H3.88666C3.85611 34.8124 3.8332 34.7894 3.8332 34.7589V23.332C3.8332 23.3014 3.85611 23.2785 3.88666 23.2785H7.38501C7.41557 23.2785 7.43848 23.3014 7.43848 23.332V34.7589ZM26.3433 24.5235L24.9302 33.3229C24.9302 33.3305 24.9302 33.3458 24.9226 33.3611C24.8615 33.8881 24.6629 35.4845 22.2263 35.4845H15.115H14.756H11.2806C10.3028 35.4845 9.44736 34.7512 9.29459 33.7812C9.28695 33.743 9.27931 33.7048 9.27168 33.6742V23.8514L9.32515 23.8361C9.34042 23.8361 9.34806 23.8285 9.36334 23.8285C9.41681 23.8132 10.7153 23.4465 12.0062 22.5223C13.8012 21.2467 14.756 19.5281 14.756 17.5574V13.8452C15.2601 13.7917 15.9552 13.8146 16.467 14.1889C17.0169 14.5937 17.2919 15.3881 17.2919 16.5415V21.1627C17.2919 21.6668 17.7044 22.0793 18.2085 22.0793H20.5458H23.5401H24.3726C24.8309 22.0793 25.2816 22.255 25.6482 22.5605C26.1982 23.0341 26.4579 23.7826 26.3433 24.5235Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Customer Satisfaction</h3>
          <p>100% Positive Feedbacks</p>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4">
        <div class="relative text-center">
          <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-white rounded-full">
            <svg width="35" height="37" viewBox="0 0 35 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30.0586 14.0693V12.6468C30.0586 9.24223 28.8538 6.07857 26.6695 3.73109C24.4309 1.32143 21.3527 0 17.9947 0H16.821C13.463 0 10.3849 1.32143 8.14622 3.73109C5.96197 6.07857 4.75714 9.24223 4.75714 12.6468V14.0693C2.10651 14.2481 0 16.4557 0 19.1529V21.3761C0 24.1821 2.28529 26.4674 5.09139 26.4674H7.95966C8.47269 26.4674 8.89244 26.0477 8.89244 25.5347V14.9866C8.89244 14.4735 8.47269 14.0538 7.95966 14.0538H6.62269V12.6468C6.62269 6.49832 11.0067 1.86555 16.8132 1.86555H17.987C23.8013 1.86555 28.1775 6.49832 28.1775 12.6468V14.0538H26.8405C26.3275 14.0538 25.9078 14.4735 25.9078 14.9866V25.5269C25.9078 26.0399 26.3275 26.4597 26.8405 26.4597H28.1464C27.7655 31.3256 24.4153 32.4527 22.8607 32.7092C22.4332 31.3956 21.1973 30.4473 19.7437 30.4473H17.4118C15.6084 30.4473 14.1393 31.9164 14.1393 33.7197C14.1393 35.5231 15.6084 37 17.4118 37H19.7515C21.2595 37 22.5265 35.9739 22.9074 34.5903C23.6691 34.4815 24.8739 34.2095 26.071 33.5099C27.7578 32.5227 29.7555 30.5095 30.0197 26.4519C32.6859 26.2887 34.8002 24.0733 34.8002 21.3683V19.1452C34.808 16.4557 32.7092 14.2403 30.0586 14.0693ZM7.04244 24.5941H5.10693C3.32689 24.5941 1.88109 23.1483 1.88109 21.3683V19.1452C1.88109 17.3651 3.32689 15.9193 5.10693 15.9193H7.04244V24.5941ZM19.7515 35.1345H17.4118C16.6345 35.1345 16.0048 34.5048 16.0048 33.7275C16.0048 32.9502 16.6345 32.3206 17.4118 32.3206H19.7515C20.5288 32.3206 21.1584 32.9502 21.1584 33.7275C21.1584 34.5048 20.5288 35.1345 19.7515 35.1345ZM32.9424 21.3683C32.9424 23.1483 31.4966 24.5941 29.7166 24.5941H27.7811V15.9193H29.7166C31.4966 15.9193 32.9424 17.3651 32.9424 19.1452V21.3683Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-xl font-bold font-heading">Support</h3>
          <p>Online Support 24/7</p>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Nigodo

Tailwind CSS

Nigodo

Feature card grid with section heading and six icon cards

A marketing feature section with a small section label, a bold centered heading, and intro paragraph above a 3x2 grid of outlined cards. Each card has a pastel blob icon, a title, and short descriptive text describing CRM and business platform capabilities.

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Custom analytics</h4>
          <p class="text-lg font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-people.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Team Management</h4>
          <p class="text-lg font-extrabold leading-7">Our calendar lets you know what is happening with customer and projects so you.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-write.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Build your website</h4>
          <p class="text-lg font-extrabold leading-7">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-box.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Connect multiple apps</h4>
          <p class="text-lg font-extrabold leading-7">The first business platform to bring together all of your products from one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-settings.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Easy setup</h4>
          <p class="text-lg font-extrabold leading-7">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Atis

Tailwind CSS

Atis

Dark Feature Section with Four Icon Columns

A dark-background marketing section with a small teal eyebrow label, a two-line centered heading, and four columns each showing a green icon tile, bold heading, and gray body text. Content is arranged in a horizontal row of equal feature columns.

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl md:text-5xl font-bold text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block p-3 bg-green-800 text-green-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
            </svg>
          </span>
          <h4 class="mb-4 text-2xl font-bold font-heading text-white">Lorem ipsum dolor sit amet consectutar</h4>
          <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>
        </div>
        <div class="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block p-3 bg-green-800 text-green-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <h4 class="mb-4 text-2xl font-bold font-heading text-white">Ut congue nec leo eget aliquam</h4>
          <p class="text-gray-500 leading-loose">Ut tempus tellus ac nisi vestibulum tempus. Nunc tincidunt lectus libero, ac ultricies augue elementum at.</p>
        </div>
        <div class="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block p-3 bg-green-800 text-green-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
          </span>
          <h4 class="mb-4 text-2xl font-bold font-heading text-white">Proin fringilla eleifend justo pellentesque</h4>
          <p class="text-gray-500 leading-loose">Donec ut ligula nunc. Mauris blandit vel est et facilisis. Integer sapien felis, aliquet at posuere et, porttitor quis ligula.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block p-3 bg-green-800 text-green-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
              <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
            </svg>
          </span>
          <h4 class="mb-4 text-2xl font-bold font-heading text-white">Morbi sagittis ligula sit amet elit maximus</h4>
          <p class="text-gray-500 leading-loose">Duis ut facilisis orci. Morbi lacinia nunc a augue eleifend, sed placerat ex faucibus. Duis ante arcu, pretium ac luctus vulputate.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

Features from Pstls.

Tailwind CSS

Pstls.

Dark Feature Section with Photo and Four Icon Features

A marketing feature section with a photo of people collaborating at a table on the left overlapping a black panel with a serif heading and a 2x2 grid of icon-led features, each with a title and short body text. The layout is split between image and text content with decorative lavender background accent on the right.

<section class="pb-24 pt-48 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex justify-center">
      <div class="bg-black pb-24 pt-16 ml-auto relative">
        <div class="xl:absolute left-0 -mt-40 xl:-ml-52"><img class="block mx-auto max-w-sm" src="pstls-assets/images/features/features-women.png" alt="" ></div>
        <div class="md:max-w-lg hidden xl:block px-64 py-80 bg-indigo-100 xl:absolute top-0 right-0 xl:-mr-52 -mr-48" style="z-index: -1;"></div>
        <div class="max-w-3xl xl:max-w-5xl mx-auto xl:ml-auto xl:-mr-20 mt-12 xl:mt-0 px-10 xl:px-32">
          <div class="flex xl:justify-end">
            <div class="w-full md:w-8/12 xl:w-10/12">
              <h2 class="max-w-xl text-4xl text-white font-heading" >Lorem ipsum dolor sit amet conscetutar domor at elis</h2>
            </div>
          </div>
          <div class="flex flex-wrap -mx-4 mt-12 -mb-10 justify-end">
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/document-clean.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >Layer styles</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/check-circle.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >No errors</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/filters-1.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >Change of access</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            
            <div class="w-full md:w-1/2 xl:w-5/12 px-4 xl:px-10 mb-10"><img src="pstls-assets/icons/users.svg" alt="" >
              <h5 class="mt-8 mb-6 text-xl text-white font-heading" >List of regular access</h5>
              <p class="leading-8 text-gray-400" >Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from BoldUI

Tailwind CSS

BoldUI

Dark Feature Grid with Yellow Icons and Ellipse Accents

A six-item feature section on a dark background arranged in a three-column, two-row grid. Each item has a yellow icon, a bold heading, and a short gray paragraph, with faint tilted ellipse outlines behind the icons.

<section class="relative pb-20 pt-32 bg-black overflow-hidden">
  <img class="absolute top-0 right-0" src="boldui-assets/elements/shadow-light-3.svg" alt="">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 -mb-32">
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.4008 6.86099C25.403 6.86099 25.4047 6.85928 25.4047 6.85717C25.4048 6.18162 25.4314 5.49848 25.4047 4.82297C25.4047 4.81532 25.4047 4.80767 25.4047 4.80002C25.4047 4.44442 25.1638 4.17294 24.8426 4.06205C23.5196 3.60321 22.1928 3.14437 20.8698 2.68553C18.782 1.96285 16.6981 1.23635 14.6104 0.513674C14.1477 0.353079 13.6889 0.169543 13.2186 0.0318899C12.9853 -0.0369364 12.8247 0.0165949 12.6221 0.0854212C12.385 0.169542 12.1441 0.24984 11.9071 0.333961C9.90728 1.02605 7.91131 1.71813 5.91153 2.41022C4.34764 2.95318 2.78758 3.49232 1.22369 4.03529C1.19692 4.04293 1.17398 4.05441 1.14722 4.06205C0.826027 4.17294 0.585134 4.44825 0.585134 4.80002V11.8853C0.585134 13.3765 0.581311 14.8678 0.585134 16.359C0.588958 17.6247 0.810732 18.8979 1.23134 20.0909C2.09167 22.5496 3.65555 24.7099 5.51769 26.5109C7.35688 28.2889 9.50961 29.7763 11.8191 30.8699C12.083 30.9923 12.3468 31.1108 12.6106 31.2255C12.6248 31.2326 12.6424 31.2397 12.657 31.2468C12.6579 31.2472 12.6628 31.2484 12.6637 31.2484C12.6638 31.2484 12.6642 31.2485 12.6643 31.2485C12.7025 31.2638 12.7445 31.2791 12.7827 31.2905C12.965 31.3399 13.1661 31.3138 13.3674 31.231C13.3701 31.2299 13.3744 31.229 13.3768 31.2274C13.3792 31.2258 13.3805 31.2249 13.3832 31.2238C15.7141 30.2336 17.8769 28.8347 19.7724 27.1571C21.6842 25.4632 23.3705 23.4022 24.3799 21.043C24.8999 19.8233 25.2441 18.5615 25.3588 17.2385C25.42 16.5311 25.397 15.8161 25.397 15.1049V6.86481C25.397 6.8627 25.3987 6.86099 25.4008 6.86099ZM19.7839 11.5565C19.4665 11.8738 19.1491 12.1912 18.8318 12.5086C17.4552 13.8851 16.0825 15.2578 14.706 16.6343C13.838 17.5023 12.9662 18.3741 12.0982 19.2421C11.6585 19.6818 10.9129 19.6818 10.477 19.2421C10.3011 19.0662 10.1252 18.8903 9.94934 18.7144C8.71811 17.4832 7.48689 16.252 6.25183 15.0169C5.79682 14.5619 5.83123 13.8545 6.25183 13.3957C6.67244 12.9406 7.44865 12.9712 7.87308 13.3957C8.04897 13.5716 8.22486 13.7513 8.40074 13.9272C9.31207 14.8385 10.2234 15.7567 11.1347 16.6687C11.2149 16.749 11.345 16.749 11.4253 16.6687C12.8018 15.2922 14.1745 13.9157 15.551 12.5392C16.419 11.6712 17.2908 10.7994 18.1588 9.93141C18.6138 9.47639 19.325 9.5108 19.78 9.93141C20.2389 10.352 20.2083 11.132 19.7839 11.5565Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">Security in saving</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M32.0001 16.1393C32.0001 6.99642 25.1429 0.139282 16.0001 0.139282C7.61911 0.139282 6.10352e-05 7.75833 6.10352e-05 16.1393C6.10352e-05 25.2821 6.8572 32.1393 16.0001 32.1393C25.1429 32.1393 32.0001 25.2821 32.0001 16.1393ZM11.4286 13.0917C10.9796 12.6094 10.9993 11.9972 11.4286 11.5679C11.858 11.1385 12.5317 11.1471 12.9524 11.5679L16.0001 14.6155L19.0477 11.5679C19.0477 11.5679 19.8675 10.8929 20.5715 11.5679C21.2754 12.2428 20.5715 13.0917 20.5715 13.0917L17.5239 16.1393L20.5715 19.0829C21.5023 19.9856 20.5715 20.7107 20.5715 20.7107C20.5715 20.7107 19.8096 21.3922 19.0477 20.6303L16.0001 17.6631L12.9524 20.6303C12.9524 20.6303 12.1133 21.315 11.4286 20.6303C11.0078 20.2095 11.2118 19.3279 11.4286 19.0829L14.4763 16.1393L11.4286 13.0917Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">No errors</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.89077 3.01913C-0.963347 6.87325 -0.963347 13.1683 2.89077 17.0224C5.63148 19.7632 9.74255 20.6624 13.3397 19.2921L15.7807 21.733C15.9948 21.9472 16.2946 22.0756 16.5943 22.0756H19.0781V24.5594C19.0781 24.8592 19.2066 25.1589 19.4207 25.373L20.6197 26.5721C20.8338 26.7862 21.1336 26.9147 21.4334 26.9147H23.9171V29.3985C23.9171 29.6982 24.0456 29.998 24.2597 30.2121L25.7157 31.6681C25.9299 31.8822 26.2296 32.0107 26.4866 32.0107L30.7261 32.1392C31.0259 32.1392 31.3685 32.0535 31.6254 31.7966C31.8395 31.5825 31.968 31.2399 31.968 30.8973L31.8395 26.6577C31.8395 26.358 31.6682 26.101 31.4969 25.8869L19.1209 13.5537C20.4484 9.91373 19.592 5.84549 16.8513 3.10478C13.04 -0.834988 6.7449 -0.834988 2.89077 3.01913ZM15.0527 8.71467L10.1708 13.8535C9.91384 14.1533 9.52843 14.3246 9.10019 14.3246C8.67196 14.3246 8.32937 14.1533 8.0296 13.8535L5.33172 10.9843C4.77501 10.3848 4.81783 9.48549 5.37454 8.92879C5.97407 8.37208 6.87337 8.4149 7.43007 8.97161L9.10019 10.7274L12.9543 6.70196C13.511 6.10243 14.4531 6.10243 15.0098 6.65914C15.5666 7.21584 15.6094 8.11514 15.0527 8.71467Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">Change of access</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30.9945 11.3916L18.5515 1.76009C17.0417 0.614719 14.9592 0.614719 13.4494 1.76009L0.954461 11.3916C0.590024 11.6519 0.381775 12.1205 0.381775 12.5891V30.7068C0.381775 31.4877 0.954461 32.1125 1.68333 32.2166H30.3176C31.0465 32.1125 31.6192 31.4877 31.6192 30.7068V12.5891C31.6192 12.1205 31.411 11.6519 30.9945 11.3916ZM3.50552 27.2707V16.5458L8.86794 22.3247L3.50552 27.2707ZM18.8119 18.3159C17.1979 16.8582 14.8031 16.8582 13.1891 18.3159L11.1066 20.1902L4.28645 12.7973L15.3757 4.25909C15.7402 3.94671 16.2608 3.94671 16.6252 4.25909L27.7145 12.7973L20.8944 20.2422L18.8119 18.3159ZM28.4955 27.2707L23.1851 22.3768L28.4955 16.5458V27.2707Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">Weekly email updates</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="25" height="33" viewBox="0 0 25 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.44631 21.8809H19.5368C22.2652 19.6915 24.0168 16.323 24.0168 12.5841C24.0168 5.94831 18.6274 0.558838 11.9916 0.558838C5.38947 0.558838 0 5.94831 0 12.5841C0 16.323 1.71789 19.6915 4.44631 21.8809ZM11.9916 3.01778C17.28 3.01778 21.5579 7.29567 21.5579 12.5841C21.5579 15.1441 20.5137 17.502 18.8295 19.2199C18.3579 17.4683 17.0105 16.1209 15.3263 15.6157C14.3831 16.2557 13.2042 16.6262 11.9916 16.6262C10.7789 16.6262 9.59999 16.2557 8.65683 15.6157C6.97263 16.1209 5.62526 17.4683 5.15368 19.2199C3.46947 17.502 2.45895 15.1441 2.45895 12.5841C2.42526 7.29567 6.73684 3.01778 11.9916 3.01778Z" fill="#FFEC3E"></path>
              <path d="M11.9916 15.0094C14.4844 15.0094 16.5052 12.9885 16.5052 10.4957C16.5052 8.00284 14.4844 5.98199 11.9916 5.98199C9.49873 5.98199 7.47789 8.00284 7.47789 10.4957C7.47789 12.9885 9.49873 15.0094 11.9916 15.0094Z" fill="#FFEC3E"></path>
              <path d="M21.4905 23.363H2.49263C1.17894 23.363 0.134735 24.4409 0.134735 25.7209V30.2009C0.134735 31.5146 1.21263 32.5588 2.49263 32.5588H21.4905C22.8042 32.5588 23.8484 31.4809 23.8484 30.2009V25.7209C23.8484 24.4072 22.8042 23.363 21.4905 23.363ZM7.41052 29.022C7.71368 29.3251 7.71368 29.763 7.41052 30.0662C7.27578 30.2009 7.07368 30.2683 6.90526 30.2683C6.73683 30.2683 6.53473 30.2009 6.39999 30.0662L5.35578 29.022L4.2442 30.0662C4.10947 30.2009 3.90736 30.2683 3.73894 30.2683C3.57052 30.2683 3.36842 30.2009 3.23368 30.0662C2.93052 29.763 2.93052 29.3251 3.23368 29.022L4.27789 27.9778L3.23368 26.9336C2.93052 26.6304 2.93052 26.1925 3.23368 25.8894C3.53684 25.5862 3.97473 25.5862 4.27789 25.8894L5.3221 26.9336L6.36631 25.8894C6.66947 25.5862 7.10736 25.5862 7.41052 25.8894C7.71368 26.1925 7.71368 26.6304 7.41052 26.9336L6.36631 27.9778L7.41052 29.022ZM14.08 29.022C14.3831 29.3251 14.3831 29.763 14.08 30.0662C13.9452 30.2009 13.7431 30.2683 13.5747 30.2683C13.4063 30.2683 13.2042 30.2009 13.0695 30.0662L11.9916 28.9883L10.9474 30.0325C10.8126 30.1672 10.6105 30.2346 10.4421 30.2346C10.2737 30.2346 10.0716 30.1672 9.93683 30.0325C9.63367 29.7293 9.63367 29.2915 9.93683 28.9883L10.981 27.9441L9.93683 26.8999C9.63367 26.5967 9.63367 26.1588 9.93683 25.8557C10.24 25.5525 10.6779 25.5525 10.981 25.8557L12.0253 26.8999L13.0695 25.8557C13.3726 25.5525 13.8105 25.5525 14.1137 25.8557C14.4168 26.1588 14.4168 26.5967 14.1137 26.8999L13.0695 27.9441L14.08 29.022ZM20.7831 29.022C21.0863 29.3251 21.0863 29.763 20.7831 30.0662C20.6484 30.2009 20.4463 30.2683 20.2779 30.2683C20.1095 30.2683 19.9073 30.2009 19.7726 30.0662L18.7284 29.022L17.6842 30.0662C17.5495 30.2009 17.3474 30.2683 17.1789 30.2683C17.0105 30.2683 16.8084 30.2009 16.6737 30.0662C16.3705 29.763 16.3705 29.3251 16.6737 29.022L17.7179 27.9778L16.6737 26.9336C16.3705 26.6304 16.3705 26.1925 16.6737 25.8894C16.9768 25.5862 17.4147 25.5862 17.7179 25.8894L18.7621 26.9336L19.8063 25.8894C20.1095 25.5862 20.5473 25.5862 20.8505 25.8894C21.1537 26.1925 21.1537 26.6304 20.8505 26.9336L19.8063 27.9778L20.7831 29.022Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">Frequent authentication</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/3 px-4 mb-32">
        <div class="w-64 mx-auto">
          <span class="relative block mb-6">
            <img class="absolute h-64 w-40 md:w-64 top-0 left-0 transform -translate-x-1/2 -mt-28" src="boldui-assets/elements/ellipse.svg" alt="">
            <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M29.0868 0.558838H2.88129C1.41963 0.558838 0.271179 1.70729 0.271179 3.16895V29.9487C0.271179 31.4104 1.41963 32.5588 2.88129 32.5588H29.0868C30.5485 32.5588 31.697 31.4104 31.697 29.9487V3.16895C31.697 1.70729 30.4963 0.558838 29.0868 0.558838ZM28.5648 29.4267H3.40332V3.69097H28.5648V29.4267Z" fill="#FFEC3E"></path>
              <path d="M26.2157 9.6943C26.2157 10.5817 25.5371 11.2604 24.6496 11.2604H7.31848C6.48324 11.2604 5.75241 10.5817 5.75241 9.6943C5.75241 8.80686 6.48324 8.12823 7.31848 8.12823H24.6496C25.4849 8.12823 26.2157 8.80686 26.2157 9.6943Z" fill="#FFEC3E"></path>
              <path d="M13.2173 16.585C13.2173 17.4724 12.5387 18.1511 11.6513 18.1511H7.31848C6.48324 18.1511 5.75241 17.4724 5.75241 16.585C5.75241 15.6976 6.48324 15.0189 7.31848 15.0189H11.6513C12.5387 15.0189 13.2173 15.6976 13.2173 16.585Z" fill="#FFEC3E"></path>
              <path d="M13.2173 23.5279C13.2173 24.4153 12.5387 25.0939 11.6513 25.0939H7.31848C6.48324 25.0939 5.75241 24.4153 5.75241 23.5279C5.75241 22.6404 6.48324 21.9618 7.31848 21.9618H11.6513C12.5387 21.9618 13.2173 22.6404 13.2173 23.5279Z" fill="#FFEC3E"></path>
              <path d="M25.7981 18.0467L20.3169 23.4757C20.0037 23.7889 19.586 23.9455 19.2206 23.9455C18.803 23.9455 18.4376 23.7889 18.1244 23.4757L16.0363 21.3876C15.4099 20.7612 15.4099 19.7693 16.0363 19.1951C16.6627 18.5687 17.6546 18.5687 18.2288 19.1951L19.2206 20.1869L23.5534 15.8542C24.1798 15.2277 25.1717 15.2277 25.7459 15.8542C26.3723 16.4284 26.3723 17.4202 25.7981 18.0467Z" fill="#FFEC3E"></path>
            </svg>
          </span>
          <div class="max-w-xs">
            <h3 class="mb-6 text-lg text-white font-heading">List of regular users</h3>
            <p class="text-lg text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Acros

Tailwind CSS

Acros

Feature Section with Heading, CTA, and Four Icon Features

A light marketing feature section with a serif heading and outlined Learn more button above a four-column row of icon-led features, each with a bold title and short supporting paragraph. The layout is a horizontal row of equally spaced feature items beneath a split header.

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-16">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <h2 class="max-w-3xl font-heading text-3xl sm:text-4xl">The latest version of this excellent product is waiting to deploy</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Learn more</a></div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-12 xl:mb-0">
        <div class="max-w-xs mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">Frequent authentication</h3>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-12 xl:mb-0">
        <div class="max-w-xs mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.9998 11.4782C14.0169 11.4782 15.652 9.84306 15.652 7.82602C15.652 5.80897 14.0169 4.17383 11.9998 4.17383C9.98279 4.17383 8.34766 5.80897 8.34766 7.82602C8.34766 9.84306 9.98279 11.4782 11.9998 11.4782Z" fill="#00CBA6"></path>
              <path d="M19.3045 13.565C20.7452 13.565 21.9132 12.3971 21.9132 10.9563C21.9132 9.5156 20.7452 8.34766 19.3045 8.34766C17.8637 8.34766 16.6958 9.5156 16.6958 10.9563C16.6958 12.3971 17.8637 13.565 19.3045 13.565Z" fill="#00CBA6"></path>
              <path d="M4.76957 13.565C6.2103 13.565 7.37825 12.3971 7.37825 10.9563C7.37825 9.5156 6.2103 8.34766 4.76957 8.34766C3.32883 8.34766 2.16089 9.5156 2.16089 10.9563C2.16089 12.3971 3.32883 13.565 4.76957 13.565Z" fill="#00CBA6"></path>
              <path d="M11.9999 12.522C8.26007 12.522 5.21729 15.5647 5.21729 19.3046C5.21729 19.5926 5.45104 19.8263 5.73904 19.8263H18.2608C18.5488 19.8263 18.7825 19.5926 18.7825 19.3046C18.7825 15.5647 15.7397 12.522 11.9999 12.522Z" fill="#00CBA6"></path>
              <path d="M5.66921 14.7216C5.34991 14.6537 5.02537 14.6089 4.69565 14.6089C2.10678 14.6089 0 16.7157 0 19.3045C0 19.5925 0.233755 19.8263 0.521755 19.8263H4.26991C4.21146 19.6625 4.17389 19.4882 4.17389 19.3045C4.17389 17.5922 4.73321 16.0113 5.66921 14.7216Z" fill="#00CBA6"></path>
              <path d="M19.3041 14.6089C18.9744 14.6089 18.6499 14.6537 18.3306 14.7216C19.2666 16.0113 19.8259 17.5922 19.8259 19.3045C19.8259 19.4882 19.7883 19.6624 19.7299 19.8263H23.478C23.766 19.8263 23.9998 19.5925 23.9998 19.3045C23.9998 16.7157 21.893 14.6089 19.3041 14.6089Z" fill="#00CBA6"></path>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">List of regular users</h3>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-12 sm:mb-0">
        <div class="max-w-xs mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.544 9.53998V10.7466C12.544 11.1299 12.6205 11.4514 12.7716 11.7019C12.9799 12.0476 13.322 12.2457 13.7103 12.2457C14.0908 12.2457 14.469 12.0604 14.8341 11.6953L18.8195 7.70984C19.6946 6.83478 19.6946 5.41095 18.8195 4.53589L14.8341 0.550415C14.469 0.18512 14.0908 0 13.7103 0C13.1297 0 12.544 0.463623 12.544 1.49908V2.59497C6.88564 2.92914 2.20144 7.27148 1.50527 12.9567C1.46627 13.2742 1.64681 13.5782 1.94436 13.6959C2.02859 13.7292 2.11629 13.7454 2.2029 13.7454C2.42226 13.7454 2.63503 13.6426 2.77053 13.4575C4.63784 10.9061 7.63601 9.38287 10.7905 9.38287C11.375 9.38287 11.9628 9.43561 12.544 9.53998Z" fill="#00CBA6"></path>
              <path d="M22.0433 10.3039C21.7457 10.1859 21.4063 10.2841 21.2171 10.5424C19.35 13.0937 16.3518 14.6169 13.1973 14.6169C12.6128 14.6169 12.025 14.5642 11.4439 14.4598V13.2531C11.4439 12.2177 10.8579 11.7541 10.2775 11.7541C9.89698 11.7541 9.51887 11.9394 9.15357 12.3047L5.1681 16.2899C4.29322 17.165 4.29322 18.5888 5.16828 19.4641L9.15357 23.4494C9.51887 23.8147 9.89698 23.9998 10.2775 23.9998C10.8579 23.9998 11.4439 23.5362 11.4439 22.5007V21.4048C17.1024 21.0706 21.7864 16.7283 22.4826 11.0432C22.5216 10.7256 22.341 10.4216 22.0433 10.3039Z" fill="#00CBA6"></path>
              <defs><rect width="24" height="24" fill="white"></rect></defs>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">Change of access</h3>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4">
        <div class="max-w-xs mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
            <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27264 1.5H15.7006C17.0599 1.51525 18.3538 2.08993 19.2808 3.0902C20.2077 4.09048 20.6869 5.42903 20.6067 6.79412V13.322C20.6869 14.6871 20.2077 16.0256 19.2808 17.0259C18.3538 18.0262 17.0599 18.6009 15.7006 18.6161H6.27264C3.35273 18.6161 1.38477 16.2407 1.38477 13.322V6.79412C1.38477 3.87545 3.35273 1.5 6.27264 1.5Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16.6529 7.06104L12.3874 10.4953C11.5802 11.1282 10.4486 11.1282 9.64141 10.4953L5.33936 7.06104" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">Weekly email updates</h3>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Features from Bendis

Tailwind CSS

Bendis

Six-Item Feature Grid with Blue Line Icons

A light-background grid of six feature items arranged in three columns and two rows, each with a blue line icon, bold uppercase heading, and gray body paragraph. It presents product features in a marketing-style section without buttons, images, or interactive controls.

<section class="py-24 bg-blue-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 38 38" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 -0.0633545L0 18.6833L19 37.43L38 18.6833L19 -0.0633545ZM4.47783 18.6833L19 4.35477L25.1418 10.4146L22.9026 12.6239L19 8.77429L8.95708 18.6833L12.8582 22.5339L10.6191 24.7432L4.47783 18.6833ZM24.5665 18.6833L19 24.177L13.4349 18.6833L19 13.1924L24.5665 18.6833ZM12.8582 26.9525L15.0974 24.7432L19 28.5923L29.0444 18.6833L25.1418 14.8327L27.3809 12.6235L33.5222 18.6833L19 33.0119L12.8582 26.9525Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">Security in saving</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 38 38" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.5832 0V3.13632C28.5869 3.92368 34.8332 10.612 34.8332 18.7467C34.8332 26.8799 28.5869 33.5678 20.5832 34.3551V37.4933C30.3354 36.6957 38 28.613 38 18.7467C38 8.87889 30.3354 0.799545 20.5832 0Z"></path>
              <path d="M17.4168 34.3551C9.4164 33.5678 3.16683 26.8799 3.16683 18.7467C3.16683 10.6125 9.4164 3.92368 17.4168 3.13632V0C7.6665 0.799545 0 8.87889 0 18.7467C0 28.613 7.6665 36.6957 17.4168 37.4933V34.3551Z"></path>
              <path d="M9.6425 17.1846C10.3968 12.7524 14.2932 9.37332 19 9.37332C23.7068 9.37332 27.6032 12.7524 28.3575 17.1846H31.5566C30.7776 11.0212 25.4605 6.24872 19 6.24872C12.5429 6.24872 7.2238 11.0212 6.4429 17.1846H9.6425Z"></path>
              <path d="M28.3575 20.3087C27.6032 24.739 23.7068 28.12 19 28.12C14.2932 28.12 10.3968 24.739 9.6425 20.3087H6.44337C7.2238 26.4722 12.5428 31.2446 19 31.2446C25.4605 31.2446 30.7776 26.4722 31.5571 20.3087H28.3575Z"></path>
              <path d="M19 12.4979C15.5026 12.4979 12.6668 15.2959 12.6668 18.7467C12.6668 22.1975 15.5026 24.9954 19 24.9954C22.4988 24.9954 25.3332 22.1975 25.3332 18.7467C25.3332 15.2959 22.4988 12.4979 19 12.4979ZM19 21.8713C17.251 21.8713 15.8332 20.4723 15.8332 18.7467C15.8332 17.021 17.251 15.6221 19 15.6221C20.7504 15.6221 22.1668 17.021 22.1668 18.7467C22.1668 20.4723 20.7504 21.8713 19 21.8713Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">No errors</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-20">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 0.667786H0.583328V18.3167C0.583328 28.0633 8.38164 35.9656 18 35.9656H35.4167V18.3167C35.4167 8.57008 27.6183 0.667786 18 0.667786ZM32.5137 33.0239H18C9.99747 33.0239 3.48625 26.4259 3.48625 18.3167V3.60941H18C26.0025 3.60941 32.5137 10.2079 32.5137 18.3167V33.0239Z"></path>
              <path d="M18 6.5506C11.5876 6.5506 6.38876 11.8188 6.38876 18.3167C6.38876 24.8146 11.5876 30.0827 18 30.0827C24.4124 30.0827 29.6113 24.8146 29.6113 18.3167C29.6113 11.8188 24.4124 6.5506 18 6.5506ZM18 27.1411C13.1895 27.1411 9.29169 23.19 9.29169 18.3167C9.29169 13.4434 13.1895 9.49223 18 9.49223C22.8092 9.49223 26.7084 13.4434 26.7084 18.3167C26.7084 23.19 22.8092 27.1411 18 27.1411Z"></path>
              <path d="M18 12.4338C14.794 12.4338 12.1946 15.0679 12.1946 18.3167C12.1946 21.5654 14.794 24.1995 18 24.1995C21.2059 24.1995 23.8054 21.5654 23.8054 18.3167C23.8054 15.0679 21.2059 12.4338 18 12.4338ZM18 21.2583C16.3968 21.2583 15.0971 19.9412 15.0971 18.3167C15.0971 16.6921 16.3968 15.375 18 15.375C19.6032 15.375 20.9029 16.6921 20.9029 18.3167C20.9029 19.9412 19.6032 21.2583 18 21.2583Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">Change of access</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 38 38" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M33.8906 2.5705C31.4891 0.0529735 25.0668 2.51085 18.2086 8.12064C11.3483 2.51085 4.9261 0.0542799 2.52586 2.5705C0.122308 5.08803 2.46892 11.8146 7.82175 19.0002C2.47017 26.1861 0.122308 32.9141 2.52586 35.4298C4.92734 37.9469 11.3512 35.4882 18.209 29.8797C25.0668 35.4882 31.4895 37.9469 33.891 35.4298C36.2945 32.9123 33.9467 26.1844 28.593 19.0002C33.9479 11.8146 36.2945 5.08672 33.8906 2.5705ZM31.1819 4.48455C31.6898 4.48455 31.9047 4.59515 31.9317 4.62345C32.0714 4.76931 32.4325 6.41646 30.6961 10.2058C29.7543 12.2614 28.4214 14.4658 26.7979 16.6986C25.8407 15.5387 24.8129 14.3792 23.7165 13.231C22.6217 12.0859 21.5145 11.0087 20.4094 10.0064C24.9733 6.36987 28.9841 4.48455 31.1819 4.48455ZM25.0261 18.9993C24.0112 20.2476 22.9231 21.4955 21.7556 22.7186C20.5648 23.9677 19.3765 25.1042 18.2099 26.1422C17.0179 25.0806 15.8271 23.9407 14.6604 22.7186C13.468 21.4702 12.382 20.225 11.3911 19.0037C12.4044 17.7532 13.4913 16.5075 14.6575 15.2848C15.8512 14.0361 17.0391 12.8966 18.2057 11.8586C19.3994 12.9219 20.5906 14.0618 21.7564 15.2835C22.9492 16.5327 24.0357 17.7758 25.0261 18.9993ZM4.35253 5.40849C4.35253 4.8786 4.4581 4.65175 4.4847 4.62345C4.62269 4.47889 6.19541 4.09878 9.81342 5.91922C11.7756 6.90586 13.8782 8.30221 16.0112 10.0016C14.904 11.0052 13.7947 12.0824 12.6987 13.2306C11.6052 14.3775 10.5769 15.5374 9.62182 16.6956C6.15219 11.9122 4.35253 7.71049 4.35253 5.40849ZM5.23449 33.5162C4.72701 33.5162 4.51089 33.4043 4.4847 33.3778C4.34547 33.2315 3.98388 31.5843 5.7216 27.795C6.66341 25.7398 7.99507 23.5354 9.6185 21.3026C10.5765 22.4621 11.6048 23.6233 12.7008 24.7715C13.7943 25.9188 14.9011 26.9943 16.0083 27.9966C11.4427 31.6309 7.4319 33.5162 5.23449 33.5162ZM32.0643 32.5919C32.0643 33.1226 31.9575 33.349 31.9317 33.376C31.7925 33.5223 30.2202 33.902 26.603 32.0816C24.6425 31.0949 22.5382 29.6986 20.4069 27.9979C21.5124 26.9951 22.6209 25.9184 23.7152 24.7711C24.8104 23.6242 25.8382 22.4647 26.7954 21.3052C30.2646 26.0882 32.0643 30.2881 32.0643 32.5919Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">Weekly email updates</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 34 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M21.1164 0.166687H1.67308C0.909799 0.166687 0.284424 0.801684 0.284424 1.57671V7.21765C0.284424 7.99267 0.909799 8.62767 1.67308 8.62767H21.1164C21.8801 8.62767 22.505 7.99267 22.505 7.21765V1.57671C22.505 0.801684 21.8801 0.166687 21.1164 0.166687ZM19.7277 5.8072H3.06216V2.98715H19.7277V5.8072Z"></path>
              <path d="M29.4492 0.166687C27.1489 0.166687 25.2828 2.06152 25.2828 4.39718C25.2828 6.73283 27.1489 8.62767 29.4492 8.62767C31.7494 8.62767 33.6155 6.73283 33.6155 4.39718C33.6155 2.06152 31.7494 0.166687 29.4492 0.166687ZM29.4492 5.8072C28.683 5.8072 28.0605 5.17516 28.0605 4.39718C28.0605 3.62046 28.683 2.98715 29.4492 2.98715C30.2154 2.98715 30.8378 3.62046 30.8378 4.39718C30.8378 5.17516 30.2154 5.8072 29.4492 5.8072Z"></path>
              <path d="M12.7836 19.9091H32.2269C32.9902 19.9091 33.6156 19.2741 33.6156 18.4991V12.8581C33.6156 12.0827 32.9902 11.4481 32.2269 11.4481H12.7836C12.0199 11.4481 11.3949 12.0827 11.3949 12.8581V18.4991C11.3949 19.2741 12.0199 19.9091 12.7836 19.9091ZM14.1723 14.2682H30.8378V17.0886H14.1723V14.2682Z"></path>
              <path d="M4.45081 19.9091C6.75108 19.9091 8.6172 18.0143 8.6172 15.6786C8.6172 13.343 6.75108 11.4481 4.45081 11.4481C2.15055 11.4481 0.284424 13.343 0.284424 15.6786C0.284424 18.0143 2.15055 19.9091 4.45081 19.9091ZM4.45081 14.2682C5.21701 14.2682 5.83947 14.9019 5.83947 15.6786C5.83947 16.4566 5.21701 17.0886 4.45081 17.0886C3.68461 17.0886 3.06216 16.4566 3.06216 15.6786C3.06216 14.9019 3.68461 14.2682 4.45081 14.2682Z"></path>
              <path d="M21.1164 22.7296H1.67308C0.909799 22.7296 0.284424 23.3642 0.284424 24.1396V29.7801C0.284424 30.5556 0.909799 31.1906 1.67308 31.1906H21.1164C21.8801 31.1906 22.505 30.5556 22.505 29.7801V24.1396C22.505 23.3642 21.8801 22.7296 21.1164 22.7296ZM19.7277 28.3701H3.06216V25.5497H19.7277V28.3701Z"></path>
              <path d="M29.4492 22.7296C27.1489 22.7296 25.2828 24.6245 25.2828 26.9601C25.2828 29.2958 27.1489 31.1906 29.4492 31.1906C31.7494 31.1906 33.6155 29.2958 33.6155 26.9601C33.6155 24.6245 31.7494 22.7296 29.4492 22.7296ZM29.4492 28.3701C28.683 28.3701 28.0605 27.7368 28.0605 26.9601C28.0605 26.1834 28.683 25.5497 29.4492 25.5497C30.2154 25.5497 30.8378 26.1834 30.8378 26.9601C30.8378 27.7368 30.2154 28.3701 29.4492 28.3701Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">Frequent authentication</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="flex">
          <span class="flex-shrink-0 mr-8">
            <svg class="text-blue-500 h-10 w-10" viewBox="0 0 37 37" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.5293 12.9871C15.4702 12.9871 12.9884 15.4677 12.9884 18.5279C12.9884 21.587 15.4702 24.0687 18.5293 24.0687C21.59 24.0687 24.0701 21.587 24.0701 18.5279C24.0701 15.4677 21.59 12.9871 18.5293 12.9871ZM18.5293 20.3747C17.5081 20.3747 16.6825 19.5491 16.6825 18.5279C16.6825 17.5067 17.5081 16.6811 18.5293 16.6811C19.5504 16.6811 20.376 17.5067 20.376 18.5279C20.376 19.5491 19.5504 20.3747 18.5293 20.3747Z"></path>
              <path d="M2.67134 36.9983L13.3058 26.3639L10.6941 23.7522L0.0596512 34.3866L2.67134 36.9983Z"></path>
              <path d="M37 34.3849L26.3656 23.7505L23.7539 26.3622L34.3883 36.9966L37 34.3849Z"></path>
              <path d="M34.3863 0.0588327L23.7523 10.6929L26.364 13.3046L36.998 2.67052L34.3863 0.0588327Z"></path>
              <path d="M0.0602576 2.67056L10.6947 13.305L13.3064 10.6933L2.67195 0.058873L0.0602576 2.67056Z"></path>
            </svg>
          </span>
          <div>
            <h3 class="mb-4 text-lg font-bold uppercase font-heading text-blue-800">List of regular users</h3>
            <p class="text-base text-gray-500 leading-loose">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

421 Tailwind features section allows you to describe the features of your product or company in a clear way. Various layouts of icons, graphics, headings and descriptions allow you to choose the perfect variant of Tailwind features component.

On this subpage, you can browse the different Tailwind features component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.

Get access to all Tailwind features components, code and our editor. Test the editor demo for free.

Try for Free →

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 Features Components

Framework

UI Library

Components

Features from Saturn

Feature Section with Centered Heading and Phone Mockup

Features from DarkPro

Dark three-column feature highlights with circled icons

Features from Flaro

Hero Section with Heading, Body Text, and Recent Users Card Illustration

Your next website starts here

Features from Gradia

Split-screen hero with heading, feature checklist, and project manager card mockup

Features from Solstice

Discover our features feature grid with study room, community, summaries, events, and progress cards

Features from Basko

Three-column feature section with gradient line icons and purple text links

Features from Zanrly

Feature Section with Product Photo and Checklist Tags

Features from Nightsable

Dark Hero Section with Stacked Credit Card Mockup and Lime CTA

Features from Zeus

Six-Item Feature Grid with Colored Icon Badges

Features from Zospace

Four-column feature row with colored icon tiles

Features from Wrexa

Four-Card Furniture Promo Row with Arrow Links

Features from Flex

Feature Grid with Green Icon Tiles for CRM Capabilities

Features from Uinel

Four-column feature highlights with orange icon tiles

Features from Yofte

Four-column service benefits strip with icons

Features from Nigodo

Feature card grid with section heading and six icon cards

Features from Atis

Dark Feature Section with Four Icon Columns

Features from Pstls.

Dark Feature Section with Photo and Four Icon Features

Features from BoldUI

Dark Feature Grid with Yellow Icons and Ellipse Accents

Features from Acros

Feature Section with Heading, CTA, and Four Icon Features

Features from Bendis

Six-Item Feature Grid with Blue Line Icons

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