Home
Nomusa Botha
Feature Overview Section with Dark Mode Support

Feature Overview Section with Dark Mode Support

Feature cards with icon

This tailwind example is contributed by Nomusa Botha, on 10-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Nomusa Botha

1.6k

Fork Fullscreen

<div class="mx-auto max-w-7xl px-5 py-16 md:px-10 md:py-16 bg-gradient-to-b from-blue-50 via-white to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
  <div class="mx-auto w-full max-w-3xl text-center">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-white md:text-5xl">NeuroGraph AI Assistant</h2>
    <div class="mx-auto mb-8 mt-4 max-w-[528px] md:mb-12 lg:mb-16">
      <p class="text-lg text-blue-700 dark:text-gray-300">
        NeuroGraph AI Assistant simplifies complex workflows by offering intelligent, automated insights to streamline your tasks.
      </p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8 md:grid-cols-3 lg:gap-12">
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">Task Automation</p>
      <p class="text-blue-700 dark:text-gray-300">
        Automate repetitive tasks with NeuroGraph's intuitive and intelligent task manager.
      </p>
    </div>
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">Data Analysis</p>
      <p class="text-blue-700 dark:text-gray-300">
        Gain actionable insights from your data with NeuroGraph's AI-powered analysis.
      </p>
    </div>
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">Personalized Recommendations</p>
      <p class="text-blue-700 dark:text-gray-300">
        Receive tailored suggestions to improve productivity and efficiency in real time.
      </p>
    </div>
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">Seamless Integrations</p>
      <p class="text-blue-700 dark:text-gray-300">
        Connect NeuroGraph with your favorite tools for a unified workflow.
      </p>
    </div>
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">Advanced Reporting</p>
      <p class="text-blue-700 dark:text-gray-300">
        Generate detailed reports to track performance and identify trends.
      </p>
    </div>
    
    <div class="relative mb-8 flex flex-col rounded-2xl border border-blue-300 bg-white p-8 shadow-lg dark:border-gray-600 dark:bg-gray-800 lg:mb-4">
      <div class="absolute -top-8 right-4 flex h-16 w-16 items-center justify-center rounded-full border border-blue-400 bg-blue-100 shadow-md dark:border-gray-500 dark:bg-gray-700 lg:right-8">
        <img src="https://www.svgrepo.com/show/530666/gene-sequence.svg" alt="Icon" class="h-12">
      </div>
      <p class="mb-4 text-xl font-semibold text-blue-900 dark:text-white">NeuroGraph API</p>
      <p class="text-blue-700 dark:text-gray-300">
        Access robust APIs to embed NeuroGraph’s capabilities into your own applications.
      </p>
    </div>
  </div>
</div>

Related Examples

Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

11 months ago

1.3k
Featured Items

Author:
Abdul Baset Bappy

5 months ago

614
interactive testimonial with Tailwind CSS and Alpine.js

Author:
Michael Andreuzza

1 year ago

2.3k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

11 months ago

1.6k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

1.9k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12.3k
Feature Cards
w/ large icons

Author:
Mr Robot

3 years ago

9.8k
Feature Section Cards

Author:
Akram Khan

1 year ago

2k
Our Vision block

Author:
L.J. Weber

2 years ago

11.7k
Responsive Features Section

Author:
ariaw

7 months ago

700
Hotel rooms
A simple room overview

Author:
Matti

10 months ago

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

Author:
Matti

11 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components