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

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

2 years ago

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

Author:
Anonymous

1 year ago

20k
profile3

Author:
pablitodgb

3 months ago

189
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

1 year ago

2.3k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.7k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

7 months ago

657
beautifull project page

Author:
Akram Khan

1 year ago

1.9k
Elevated feature card

Author:
magersa

1 year ago

4k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

5 months ago

1.1k
Cards section - Sport

Author:
ABDO-SY

6 months ago

1.6k
Gradient card

Author:
TailwindFlex

2 years ago

8.9k
Cards Seaction - Services block

Author:
ABDO-SY

5 months ago

989

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components