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

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

Personal card
A card to show minimal info for staff member

Author:
farid

1 year ago

1.3k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

2 years ago

5.3k
Profile card

Author:
ariaw

6 months ago

428
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.7k
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

131
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

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

1 year ago

1.8k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

1 year ago

2.1k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

7 months ago

768
SimpleGrid

Author:
wtfbrh

1 year ago

1.3k
Tailwind card

Author:
Conan Hilton

3 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components