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

2 years ago

7.4k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 year ago

2.6k
Feature Overview Section with Dark Mode Support
Feature cards with icon

Author:
Nomusa Botha

1 year ago

1.8k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

7 months ago

1.2k
Tailwind css feature cards

Author:
Kofi Osei

3 years ago

11.6k
Video Player
Youtube Video Player

Author:
KULDEEP

8 months ago

834
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

11 months ago

1.9k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.1k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
Feature cards
Feature showcase

Author:
Steven Kuhn

3 years ago

10.4k
Animated cards

Author:
Michael Andreuzza

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components