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

Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
Form
form

Author:
Aman kumar

1 year ago

2k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

64.1k
Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
Article card

Author:
Sienna

3 years ago

9.9k
Coming Soon Page

Author:
Conan Hilton

3 years ago

10.2k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

8 months ago

1.3k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

2.2k
Sign up form

Author:
Rajesh Maheshwari

11 months ago

977
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

3 months ago

528
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

2 years ago

4k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components