Cards

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

Card

Author Morris Muriuki Muthigani

Tailwind v3.4 1.8k

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 with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Uwase Alliance

1 year ago

918
Product hunt showcase section

Leon Bachmann

3 years ago

10.9k
Dynamic Google Card

Cristian

1 year ago

1.7k
Simple Card section

Akram Khan

2 years ago

3.8k
Service/Product card
Tour trip booking showcase card

JaxStone

3 years ago

13.8k
cards
html , css ,

Hacker Development

1 year ago

1.2k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

R Thapa

3 years ago

11.8k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Nick Girga

1 year ago

1.3k
Simple card layout with image

Leon Bachmann

3 years ago

11.3k