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

3.6k

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

6.4k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

16.1k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

1 year ago

8.6k
Responsive Features Section

Author:
Abdul Baset Bappy

1 week ago

13
Feature tiles

Author:
Nishant Trivedi

1 year ago

13k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.3k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

3 months ago

748
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

5 months ago

696
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

10.9k
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.1k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components