Home
Henrik R.
Tour package card

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 CSS v3. It is responsive.

Card

Author Henrik R.

2.1k

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

Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Event notification card

Author:
Odessa Young

2 years ago

9.3k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

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

10 months ago

1.3k
Card
Simple Card

Author:
Ashraf ali

7 months ago

1.4k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

27.8k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

7 months ago

1.4k
Responsive Cards

Author:
Anonymous

1 year ago

1.4k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

3 months ago

551
Group hover card
article card

Author:
Sienna

2 years ago

11.3k
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.

Author:
SHARIFUL ISLAM

6 months ago

826
Card
card

Author:
5upreme505

10 months ago

1.6k
Features

Author:
Michael Andreuzza

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components