Cards

This tailwind example is contributed by Morris Muriuki Muthigani, on 25-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Morris Muriuki Muthigani

Fork Fullscreen

<div id="services" class="bg-cover w-full flex justify-center items-center"
  style="background-image: url(&quot;https://kikimodev.com/static/media/bgheader.5609055ae782da0be362.webp&quot;);">
  <div class="w-full bg-white p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
    <div class="w-12/12 mx-auto rounded-2xl bg-white p-5 bg-opacity-40 backdrop-filter backdrop-blur-lg">
      <div>
        <div class="flex flex-wrap items-center overflow-x-auto overflow-y-hidden py-2 justify-center text-gray-800">
          <div class="flex flex-col md:w-1/2 xl:w-1/2 p-4">
            <div class="bg-white shadow-md rounded-3xl p-4 border border-gray-100">
              <div class="flex-none lg:flex">
                <div class="h-full w-full lg:h-full lg:w-full lg:mb-0 mb-3"><img src="https://apis.kikimodev.com/Portfolio/Portfolio_2RGpBS00D1.png" alt="Work" class="w-full object-cover lg:h-full rounded-2xl">
                </div>
                <div class="flex-auto ml-3 justify-evenly py-2">
                  <div class="flex flex-wrap">
                    <div class="w-full flex-none text-xs text-blue-700 font-medium">Kikimo Developers</div>
                    <h3 class="flex-auto text-lg font-medium">About Me</h3>
                  </div>
                  <div class="flex py-4 text-sm text-gray-500">
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      </svg>
                      <p>Nairobi, Kenya</p>
                    </div>
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <p>Posted 6 month(s) ago</p>
                    </div>
                  </div>
                  <div class="flex space-x-3 text-sm font-medium"><a
                      class="mb-2 md:mb-0 bg-white px-4 py-2 shadow-sm tracking-wider border text-gray-600 rounded-full hover:bg-gray-100"
                      href="/work/37"><span>#WebDevelopment</span></a><button class="mb-2 md:mb-0 bg-red-600 px-5 py-2 shadow-sm tracking-wider text-white rounded-full hover:bg-gray-800">View</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col md:w-1/2 xl:w-1/2 p-4">
            <div class="bg-white shadow-md rounded-3xl p-4 border border-gray-100">
              <div class="flex-none lg:flex">
                <div class="h-full w-full lg:h-full lg:w-full lg:mb-0 mb-3"><img src="https://apis.kikimodev.com/Portfolio/Portfolio_YAy5x1qwZW.png" alt="Work" class="w-full object-cover lg:h-full rounded-2xl">
                </div>
                <div class="flex-auto ml-3 justify-evenly py-2">
                  <div class="flex flex-wrap">
                    <div class="w-full flex-none text-xs text-blue-700 font-medium">Kikimo Developers</div>
                    <h3 class="flex-auto text-lg font-medium">Smart Alert SOS</h3>
                  </div>
                  <div class="flex py-4 text-sm text-gray-500">
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      </svg>
                      <p>Nairobi, Kenya</p>
                    </div>
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <p>Posted 6 month(s) ago</p>
                    </div>
                  </div>
                  <div class="flex space-x-3 text-sm font-medium"><a
                      class="mb-2 md:mb-0 bg-white px-4 py-2 shadow-sm tracking-wider border text-gray-600 rounded-full hover:bg-gray-100"
                      href="/work/36"><span>#WebDevelopment</span></a><button class="mb-2 md:mb-0 bg-red-600 px-5 py-2 shadow-sm tracking-wider text-white rounded-full hover:bg-gray-800">View</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col md:w-1/2 xl:w-1/2 p-4">
            <div class="bg-white shadow-md rounded-3xl p-4 border border-gray-100">
              <div class="flex-none lg:flex">
                <div class="h-full w-full lg:h-full lg:w-full lg:mb-0 mb-3"><img src="https://apis.kikimodev.com/Portfolio/Portfolio_rxL2KTMqyr.png" alt="Work" class="w-full object-cover lg:h-full rounded-2xl">
                </div>
                <div class="flex-auto ml-3 justify-evenly py-2">
                  <div class="flex flex-wrap">
                    <div class="w-full flex-none text-xs text-blue-700 font-medium">Kikimo Developers</div>
                    <h3 class="flex-auto text-lg font-medium">Sightloss Kenya Website with admin panel</h3>
                  </div>
                  <div class="flex py-4 text-sm text-gray-500">
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      </svg>
                      <p>Nairobi, Kenya</p>
                    </div>
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <p>Posted 6 month(s) ago</p>
                    </div>
                  </div>
                  <div class="flex space-x-3 text-sm font-medium"><a
                      class="mb-2 md:mb-0 bg-white px-4 py-2 shadow-sm tracking-wider border text-gray-600 rounded-full hover:bg-gray-100"
                      href="/work/34"><span>#WebDevelopment</span></a><button class="mb-2 md:mb-0 bg-red-600 px-5 py-2 shadow-sm tracking-wider text-white rounded-full hover:bg-gray-800">View</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col md:w-1/2 xl:w-1/2 p-4">
            <div class="bg-white shadow-md rounded-3xl p-4 border border-gray-100">
              <div class="flex-none lg:flex">
                <div class="h-full w-full lg:h-full lg:w-full lg:mb-0 mb-3"><img src="https://apis.kikimodev.com/Portfolio/Portfolio_TMkWwDcLvo.png" alt="Work" class="w-full object-cover lg:h-full rounded-2xl">
                </div>
                <div class="flex-auto ml-3 justify-evenly py-2">
                  <div class="flex flex-wrap">
                    <div class="w-full flex-none text-xs text-blue-700 font-medium">Kikimo Developers</div>
                    <h3 class="flex-auto text-lg font-medium">Water Management System</h3>
                  </div>
                  <div class="flex py-4 text-sm text-gray-500">
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      </svg>
                      <p>Nairobi, Kenya</p>
                    </div>
                    <div class="flex-1 inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                      </svg>
                      <p>Posted 6 month(s) ago</p>
                    </div>
                  </div>
                  <div class="flex space-x-3 text-sm font-medium"><a
                      class="mb-2 md:mb-0 bg-white px-4 py-2 shadow-sm tracking-wider border text-gray-600 rounded-full hover:bg-gray-100"
                      href="/work/33"><span>#WebDevelopment</span></a><button class="mb-2 md:mb-0 bg-red-600 px-5 py-2 shadow-sm tracking-wider text-white rounded-full hover:bg-gray-800">View</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

6 months ago

1k
Card
Simple Card

Author:
Anonymous

3 months ago

620
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

2 months ago

214
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

3 months ago

541
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

1 month ago

184
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11k
Product card

Author:
Oliver Hansen

2 years ago

13.2k
Contact us Form with Responsive

Author:
KULDEEP

3 weeks ago

122
Author box

Author:
Mr Robot

2 years ago

11.5k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

1.9k
Cards Seaction - Services block

Author:
ABDO-SY

4 months ago

756
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

27k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components