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

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.4k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

20.4k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

4 months ago

329
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

2.6k
Card Item Financieros
Item Financiero

Author:
Ameth Galarcio

1 year ago

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

3 months ago

388
Responsive Article Section

Author:
Prashant

3 years ago

16.3k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

3.5k
Drinkware landing page

Author:
Maxim

7 months ago

1.2k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.2k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

5 days ago

38
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components