Home
Aman kumar
Holiday package card

Holiday package card

Responsive card

This tailwind example is contributed by Aman kumar, on 29-Jan-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Aman kumar

6.6k

Fork Fullscreen

<div class="flex flex-col justify-center h-screen">
  <div
    class="relative flex flex-col md:flex-row md:space-x-5 space-y-3 md:space-y-0 rounded-xl shadow-lg p-3 max-w-xs md:max-w-3xl mx-auto border border-white bg-white">
    <div class="w-full md:w-1/3 bg-white grid place-items-center">
      <img src="https://images.unsplash.com/photo-1508528075895-be7a6cabd37a?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fG1vdW50YWluJTIwd2F0ZXJmYWxsfGVufDB8fDB8fHww" alt="tailwind logo" class="rounded-xl" />
    </div>
    <div class="w-full md:w-2/3 bg-white flex flex-col space-y-2 p-3">
      <div class="flex justify-between item-center">
        <p class="text-gray-500 font-medium hidden md:block">Vacations</p>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-500" viewBox="0 0 20 20"
            fill="currentColor">
            <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" />
          </svg>
          <p class="text-gray-600 font-bold text-sm ml-1">
            4.96
            <span class="text-gray-500 font-normal">(76 reviews)</span>
          </p>
        </div>
        <div class="">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-pink-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
              clip-rule="evenodd" />
          </svg>
        </div>
        <div class="bg-gray-200 px-3 py-1 rounded-full text-xs font-medium text-gray-800 hidden md:block">
          Superhost</div>
      </div>
      <h3 class="font-black text-gray-800 md:text-3xl text-xl">The Majestic and Wonderful Bahamas</h3>
      <p class="md:text-lg text-gray-500 text-base">The best kept secret of The Bahamas is the country’s sheer
        size and diversity. With 16 major islands, The Bahamas is an unmatched destination</p>
      <p class="text-xl font-black text-gray-800">
        $110
        <span class="font-normal text-gray-600 text-base">/night</span>
      </p>
    </div>
  </div>
</div>

Related Examples

Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

3 years ago

13.9k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

2 years ago

20.9k
About us card

Author:
Sienna

3 years ago

11.9k
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

10 months ago

1.4k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

9 months ago

641
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.8k
Beautiful card design with image

Author:
Brandon D

3 years ago

13.4k
Form
form

Author:
Aman kumar

1 year ago

2.1k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

9 months ago

1.3k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

142
Info Card
info card with description

Author:
Prashant

3 years ago

13k
Login form

Author:
Rajesh Maheshwari

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components