Home
Anonymous
Feature Cards Section

Feature Cards Section

showcase key features or benefits with cards.

This tailwind example is contributed by Anonymous, on 17-Jan-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Anonymous

Fork Fullscreen

<section class="relative overflow-hidden py-10">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mx-auto text-center">
      <h2 class="font-display text-3xl tracking-tight text-slate-800 sm:text-4xl">Discover Our AI-Powered Solutions</h2>
    </div>
    <ul role="list"
      class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-2">
      <li class="rounded-2xl border border-gray-200 p-8">
        <h3 class="font-bold text-lg text-gray-900 flex items-center">
          <span>
            <svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-[26px] mr-2 fill-[#061161]" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M725.264 393.76a36.832 36.832 0 0 0-31.728-18.112H580.704l130.768-210.416a36.816 36.816 0 0 0-31.28-56.288H403.936a36.832 36.832 0 0 0-36.208 30.032L294.08 530.192a36.832 36.832 0 0 0 36.208 43.648h104.864l-35.2 299.728a36.832 36.832 0 0 0 68.832 22.112l257.008-465.392a36.8 36.8 0 0 0-0.512-36.528z"></path></svg></span>Enhanced
          Productivity
        </h3>
        <p class="mt-6 text-base text-gray-700">Leverage our AI-driven system to boost productivity. Experience instant
          solutions tailored to your unique requirements.</p>
      </li>
      <li class="rounded-2xl border border-gray-200 p-8">
        <h3 class="font-bold text-lg text-gray-900 flex items-center">
          <span>
            <svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-[26px] mr-2 fill-[#061161]" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M213.333333 469.333333h170.666667c46.933333 0 85.333333-38.4 85.333333-85.333333V213.333333c0-46.933333-38.4-85.333333-85.333333-85.333333H213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v170.666667c0 46.933333 38.4 85.333333 85.333333 85.333333zM853.333333 597.333333h-170.666666c-46.933333 0-85.333333 38.4-85.333334 85.333334v170.666666c0 46.933333 38.4 85.333333 85.333334 85.333334h170.666666c46.933333 0 85.333333-38.4 85.333334-85.333334v-170.666666c0-46.933333-38.4-85.333333-85.333334-85.333334zM964.266667 439.466667l-179.2-320c-8.533333-12.8-29.866667-12.8-38.4 0l-174.933334 320c-8.533333 12.8 4.266667 29.866667 17.066667 29.866666h354.133333c17.066667 0 29.866667-17.066667 21.333334-29.866666zM298.666667 554.666667c-119.466667 0-213.333333 98.133333-213.333334 213.333333 0 119.466667 98.133333 213.333333 213.333334 213.333333 119.466667 0 213.333333-98.133333 213.333333-213.333333 0-119.466667-98.133333-213.333333-213.333333-213.333333z"></path></svg></span>Custom
          Solutions
        </h3>
        <p class="mt-6 text-base text-gray-700">Tailor every aspect of your solution. Customize features, layouts, and
          functionalities to align with your business goals using our intuitive interface.</p>
      </li>
      <li class="rounded-2xl border border-gray-200 p-8">
        <h3 class="font-bold text-lg text-gray-900 flex items-center">
          <span>
            <svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-[26px] mr-2 fill-[#061161]" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M638.72 95.573333l289.706667 289.706667a179.2 179.2 0 0 1 0 253.44l-289.706667 289.706667a179.2 179.2 0 0 1-253.44 0l-289.706667-289.706667a179.2 179.2 0 0 1 0-253.44l289.706667-289.706667a179.2 179.2 0 0 1 253.44 0z m27.050667 372.48c26.453333 0 47.914667-21.12 47.914666-47.274666 0-26.154667-21.461333-47.36-47.914666-47.36a47.573333 47.573333 0 0 0-46.848 56.96l-30.890667 14.506666a68.394667 68.394667 0 0 0-54.869333-27.392l-2.005334 0.128-11.690666-34.218666c22.784-12.757333 38.229333-36.949333 38.229333-64.725334 0-41.088-33.706667-74.410667-75.264-74.410666-41.514667 0-75.221333 33.28-75.221333 74.410666 0 41.045333 33.706667 74.368 75.221333 74.368 2.048 0 3.925333-0.170667 5.930667-0.298666l11.477333 33.365333c-20.949333 11.605333-35.114667 33.664-35.114667 59.008 0 5.717333 0.768 11.136 2.133334 16.426667l-32.853334 15.36a85.546667 85.546667 0 0 0-70.656-36.949334 85.034667 85.034667 0 0 0-85.546666 84.48c0 46.677333 38.314667 84.48 85.546666 84.48 47.189333 0 85.504-37.802667 85.504-84.48 0-5.333333-0.554667-10.496-1.536-15.488l36.48-17.066666a68.48 68.48 0 0 0 59.306667 20.053333l23.722667 69.12c-20.48 11.648-34.304 33.493333-34.304 58.581333 0 37.333333 30.592 67.541333 68.352 67.541334 37.802667 0 68.394667-30.208 68.394666-67.541334 0-37.376-30.592-67.626667-68.394666-67.626666-0.896 0-1.877333 0.085333-2.816 0.170666l-24.874667-72.362666a67.285333 67.285333 0 0 0 27.776-62.805334l37.418667-17.493333c7.765333 5.376 17.237333 8.533333 27.392 8.533333z"></path></svg></span>Data
          Security
        </h3>
        <p class="mt-6 text-base text-gray-700">Ensure the highest level of data security with our robust encryption and
          privacy features. Protect your sensitive information with confidence.</p>
      </li>
      <li class="rounded-2xl border border-gray-200 p-8">
        <h3 class="font-bold text-lg text-gray-900 flex items-center">
          <span>
            <svg aria-hidden="true" viewBox="0 0 1024 1024" class="w-[26px] mr-2 fill-[#061161]" preserveAspectRatio="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M818.3 442a4 4 0 0 1-2.8-3.5C806.5 297.7 689 186 545.9 186c-113.2 0-214.5 72.1-253.3 175.8a4.1 4.1 0 0 1-3.6 2.6C163.9 370.8 64 474.5 64 601c0 130.7 106.4 237 237.3 237h455.8C869 838 960 747.1 960 635.3A202.5 202.5 0 0 0 818.3 442zM639.2 581.5L518.6 765.8a4 4 0 0 1-6.7 0L391.3 581.5a4 4 0 0 1 3.4-6.2h80.6a4 4 0 0 0 4-4V388a4 4 0 0 1 4-4h64a4 4 0 0 1 4 4v183.3a4 4 0 0 0 4 4h80.6a4 4 0 0 1 3.3 6.2z"></path></svg></span>Advanced
          Analytics
        </h3>
        <p class="mt-6 text-base text-gray-700">Unlock valuable insights with our advanced analytics tools. Gain a
          deeper understanding of your data and make informed decisions to drive business success.</p>
      </li>
    </ul>
  </div>
</section>

Related Examples

Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

1 year ago

5.5k
tailwind services section
display features/services of your product

Author:
L.J. Weber

1 year ago

17.7k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

9 months ago

3.2k
Facts
A simple facts overview

Author:
Matti

2 months ago

110
Animated cards

Author:
Michael Andreuzza

9 months ago

4.1k
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

10.2k
Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

1 year ago

11.5k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.1k
Feature cards
Feature showcase

Author:
Steven Kuhn

2 years ago

9.3k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

5 months ago

1.1k
Our services component

Author:
Anonymous

6 months ago

885
Services showcase Section
With hover effect on cards

Author:
Anonymous

8 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components