trip card tailwind css

by Arvind Pal

HTML

<div class="h-screen w-full bg-gray-50 p-5">
  <div class="flex flex-wrap gap-5 ">
    <div class="flex w-48 flex-col rounded-[12px] bg-white shadow-2xl">
      <div class="relative w-full">
        <img src="https://plus.unsplash.com/premium_photo-1674832821491-cb3bf3f96a42?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="h-32 w-full rounded-t-[12px]" />

        <div class="absolute top-2 right-2 rounded-full bg-white px-3 py-1 text-[12px] font-semibold">$400</div>
      </div>
      <div class="p-3">
        <div class="text-[12px] font-semibold">Socotra Island</div>
        <div class="flex pt-2">
          <img src="https://cdn-icons-png.flaticon.com/512/0/619.png" class="h-4" />
          <div class="-mt-[2px] ml-1 text-[12px] text-gray-600">Siberia, Russia</div>
        </div>
        <div class="flex gap-2 pt-2">
          <div class="py-.5 rounded-full bg-cyan-200 px-2 pb-1 text-[12px] text-cyan-600">Luxury</div>
          <div class="py-.5 rounded-full bg-red-200 px-2 pb-1 text-[12px] text-red-600">Beach</div>
        </div>
      </div>
    </div>
    <div class="flex w-48 flex-col rounded-[12px] bg-white shadow-2xl">
      <div class="relative w-full">
        <img src="https://images.unsplash.com/photo-1694000770149-79ab1486f945?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aGlsbCUyMGxvY2F0aW9ufGVufDB8fDB8fHww" class="h-32 w-full rounded-t-[12px]" />
        <div class="absolute top-2 right-2 rounded-full bg-white px-3 py-1 text-[12px] font-semibold">$200</div>
      </div>
      <div class="p-3">
        <div class="text-[12px] font-semibold">Socotra Island</div>
        <div class="flex pt-2">
          <img src="https://cdn-icons-png.flaticon.com/512/0/619.png" class="h-4" />
          <div class="-mt-[2px] ml-1 text-[12px] text-gray-600">Siberia, Russia</div>
        </div>
        <div class="flex gap-2 pt-2">
          <div class="py-.5 rounded-full bg-cyan-200...

JavaScript

tailwind.config = {
  /* Tailwind CSS config */
}