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

4.7k

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

1 year ago

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

Author:
Anonymous

1 year ago

16.4k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

14.6k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

2 months ago

433
Labs card
Lab item list card

Author:
Sedat Kumcu

1 month ago

385
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

8.4k
beautifull project Item

Author:
Akram Khan

5 months ago

1.3k
Blog Card

Author:
Md. Tofayel islam

1 month ago

205
Responsive Cards

Author:
Anonymous

5 months ago

681
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

6 months ago

2.2k
Card
Card

Author:
Aman kumar

5 months ago

499
Invoice
Invoice

Author:
Ameth Galarcio

5 months ago

958

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent