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

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

Pricing Table

Author:
Akshay

3 years ago

10.8k
Card

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

9 months ago

1.3k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.8k
Info cards

Author:
Samuel Dawson

2 years ago

10.6k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

6 months ago

830
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

6 months ago

885
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2k
Profile Card

Author:
Crimson

9 months ago

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

Author:
Akram Khan

1 year ago

2.6k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.3k
Product Card

Author:
Maxim

7 months ago

1.3k
Author box

Author:
Mr Robot

2 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components