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

909

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

Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

8 months ago

1.5k
Highlights - Speakers Section

Author:
ABDO-SY

3 weeks ago

39
Our Vision block

Author:
L.J. Weber

2 years ago

11.1k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

1 week ago

36
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

1 year ago

8k
Features grid

Author:
Sophia Baker

2 years ago

9.3k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

15.1k
Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

1 year ago

12.5k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

2 months ago

780
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

2 months ago

468

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components