Tour package card

This card could be used for featuring a product, service, or blog post:

This tailwind example is contributed by Henrik R., on 02-Aug-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author Henrik R.

Tailwind v3.4 3k 8

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 top-0 right-0 bg-teal-500 text-white px-2 py-1 m-2 rounded-md text-sm font-semibold">
        Featured
      </div>
    </div>
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-800">Discover Nature's Beauty</h2>
      <p class="text-gray-600 mb-4">Immerse yourself in the tranquil landscapes and breathtaking vistas of the natural
        world.</p>
      <div class="flex items-center mb-4">
        <svg class="h-5 w-5 text-yellow-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
          </path>
        </svg>
        <span class="text-gray-600 ml-1">4.9 (128 reviews)</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-gray-800">$299</span>
        <button 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">
          Book Now
        </button>
      </div>
    </div>
  </div>
</div>

Related Examples

User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

SHARIFUL ISLAM

1 year ago

1.9k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.5k
animated blog cards with Tailwind CSS

Michael Andreuzza

2 years ago

6.2k
User Card

Md. Tofayel islam

1 year ago

1.8k
Info Card
info card with description

Prashant

4 years ago

13.3k
Pricing card
basic pricing card with single price

Kaung Htet Min

11 months ago

547
Signup And Signin page
Signup And Signin page with tab controller

Akram Khan

2 years ago

3.4k
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Anum Shahana

1 year ago

3k
Info cards for admin panel

Sophia Baker

3 years ago

12.8k
File Upload

Rajesh Maheshwari

1 year ago

1.4k
Profile card

Jaber Zarif

2 years ago

3k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k