Home
Sedat Kumcu
Labs card

Labs card

Forked from> @henrik/tour-package-card

Lab item list card

This tailwind example is contributed by Sedat Kumcu, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Sedat Kumcu

1.8k

Fork Fullscreen

<div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 p-4">
  <div
    class="max-w-md w-full bg-white rounded-xl shadow-2xl overflow-hidden transform transition duration-500 hover:scale-105">
    <div class="relative">
      <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1540206395-68808572332f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Nature scene">
      <div class="absolute bottom-0 right-0 bg-teal-500 text-white px-2 py-1 m-2 rounded-md text-sm font-semibold">
        Location
      </div>
    </div>
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-800">Lorem ipsum dolor sit amet</h2>
      <p class="text-gray-600 mb-4">Fusce orci purus, efficitur vel eros eu, cursus pretium urna. Integer efficitur lorem vitae augue auctor aliquam. Aliquam erat volutpat. Aliquam mollis ac mi sit amet fringilla.</p>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-gray-800">$299</span>
        <a href="#" class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
          View
        </a>
      </div>
    </div>
  </div>
</div>

Related Examples

Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2.8k
Image cards

Author:
Reuben Enahoro

1 year ago

1.9k
Card
Card

Author:
Aman kumar

1 year ago

1.6k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16.2k
Personal card
A card to show minimal info for staff member

Author:
farid

11 months ago

1.2k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

7 months ago

893
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

1 month ago

124
Thankyou Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

10 months ago

2.3k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.4k
beautifull project Item

Author:
Akram Khan

1 year ago

2.3k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

7 months ago

670

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components