Home
Coastal UI
Feature Card

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 CSS v3. 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

221

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