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.2k

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

Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

9k
Features

Author:
Matti

8 months ago

785
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

27.3k
What is Webby
A showcase feature

Author:
Developer Kwame

1 year ago

1.9k
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.8k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.7k
Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

1 year ago

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

8 months ago

1.2k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Feature, Showcase

Author:
Matti

7 months ago

889
Product features list with inner border

Author:
Lîmåã M

2 years ago

13.9k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 weeks ago

31

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components