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

995

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 with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

9 months ago

1.3k
Info card

Author:
Samuel Dawson

2 years ago

9.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

7 months ago

2.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

10 months ago

3.5k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

6 months ago

1.1k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

3 months ago

1.2k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

3 weeks ago

148
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

7 months ago

1.5k
card appetizer
ss

Author:
Anonymous

4 months ago

946
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

10.5k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

7 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components