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

439

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

Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

1 year ago

1.9k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

11 months ago

2k
Information card

Author:
Samuel Dawson

2 years ago

11.9k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

6 months ago

828
Profit Card
Profit card with deatils

Author:
dongol heart

10 months ago

1.6k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

10.2k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

17.1k
Chat Bot

Author:
Md. Tofayel islam

2 months ago

264
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5k
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

1 year ago

1.5k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

3 months ago

215
Signup page- Paper / Hand-drawn UI

Author:
Akram Khan

3 months ago

501

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components