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

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 Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.7k
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

1 year ago

2.1k
Feature Section Cards

Author:
Akram Khan

1 year ago

2.4k
feature grid

Author:
ariaw

6 months ago

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

Author:
Matti

1 year ago

2.8k
Features list with images and description

Author:
Noah Schmidt

2 years ago

15k
Features grid with icon

Author:
Freja Jensen

3 years ago

11.3k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Author:
Kavita Joshi

2 years ago

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

Author:
Matti

1 year ago

1.8k
Responsive Features Section

Author:
ariaw

1 year ago

1.2k
Feature cards
Feature showcase

Author:
Steven Kuhn

3 years ago

10.5k
Feature display cards (grid layout)

Author:
Sophia Baker

3 years ago

15.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components