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

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

Highlights - Speakers Section

Author:
ABDO-SY

6 months ago

520
Featured Items

Author:
Abdul Baset Bappy

3 months ago

507
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

2 months ago

178
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

27.8k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4.9k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

1 year ago

2.4k
Feature showcase cards

Author:
bara masalma

9 months ago

1.1k
Feature cards
Feature showcase

Author:
Steven Kuhn

3 years ago

10k
Responsive Features Section

Author:
ariaw

6 months ago

722
Hotel rooms
A simple room overview

Author:
Matti

9 months ago

1.1k
Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

960
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components