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.

This tailwind example is contributed by Coastal UI, on 19-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us,Front page

Card Feature showcase Other Grid Landing Page

Author Coastal UI

Tailwind v3.4 793 8

Fork Fullscreen

<div class="w-[300px] bg-white border border-gray-200 rounded-lg p-6 flex flex-col justify-between">
    
    <div class="text-blue-600 mb-4 bg-blue-200 mr-auto rounded-md">
      <svg class="p-2 h-10 w-10" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.5l6-4l-6-4zm-6.3 8.375q-.825.125-1.487-.387T3.45 20.15L2.125 9.225q-.1-.825.4-1.475T3.85 7L5 6.85V15q0 1.65 1.175 2.825T9 19h9.3q-.15.6-.6 1.038t-1.1.512zM9 17q-.825 0-1.412-.587T7 15V4q0-.825.588-1.412T9 2h11q.825 0 1.413.588T22 4v11q0 .825-.587 1.413T20 17z"/></svg>
    </div>
    
    
    <div class="text-2xl font-medium tracking-tight text-gray-900">
      Card Heading
    </div>
    
    
    <div class="text-sm text-gray-500 line-clamp-2 mt-2">
      This is a sample paragraph that describes the card content and provides more information.
    </div>
    
    
    <div class="h-[1px] w-full bg-gray-200 my-5"></div>
    
    
    <div class="inline-flex items-center text-black cursor-pointer text-xs bg-gray-100 px-2 py-1.5 rounded mr-auto">
      <span>Learn more</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </div>
  </div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

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

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Info cards
Show various statistics on your website

Arya

4 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Features grid

Sophia Baker

3 years ago

10.9k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k