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

575

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

Responsive Cards

Author:
Anonymous

1 year ago

1.5k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.6k
Coming Soon Page

Author:
Conan Hilton

3 years ago

9.9k
Features grid

Author:
Sophia Baker

2 years ago

10k
image

Author:
pablitodgb

4 months ago

277
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

683
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

3 months ago

389
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

11.8k
split bg 2

Author:
Anonymous

4 months ago

202
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

8 months ago

1.1k
Chats Screen in neomorphism

Author:
Akram Khan

1 year ago

2.1k
card
It's a product card

Author:
SAURAV SINGH

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components