A Complete Guide To Make A Photo Collage With Overlapped Card [Apple Inspired] With Tailwind CSS

<section class="flex flex-col justify-center bg-white py-48">
  <div class="mx-auto grid max-w-6xl grid-cols-2 gap-10">
    <div class="-mt-20 flex justify-end">
      <img
        class="h-2/3 w-2/3 overflow-hidden rounded-lg object-cover"
        src="https://images.unsplash.com/photo-1616486788371-62d930495c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
      />
    </div>
    <div class="flex justify-start">
      <img
        class="overflow-hidden rounded-lg object-cover"
        src="https://images.unsplash.com/photo-1640020580603-e7beafd75d94?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80"
      />
    </div>
    <div class="-mt-64 flex justify-start">
      <img
        class="overflow-hidden rounded-lg object-cover"
        src="https://images.unsplash.com/photo-1533557950217-8768f2ee7491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
      />
    </div>
    <div class="-mr-28 ml-28 flex justify-start">
      <img
        class="h-2/3 w-2/3 overflow-hidden rounded-lg object-cover"
        src="https://images.unsplash.com/photo-1620371350502-999e9a7d80a4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=670&q=80"
      />
    </div>
    <div
      class="ml-28 -mr-28 -translate-y-96 transform overflow-hidden rounded-xl bg-white p-16 shadow-xl"
    >
      <div class="space-y-4">
        <p class="text-5xl font-bold tracking-tight text-black">
          In unprecedented times, health and safety remain the priority.
        </p>
        <p class="text-xl text-black">
          From the moment the threat of COVID‑19 emerged, Apple took action. Working closely with
          medical experts and our suppliers, we put the health and safety of the people in our
          supply chain first. We implemented standard measures like personal protective equipment,
          deep‑cleaning protocols and health screenings. But we went much further, re‑imagining
          entire factory layouts and processes to ensure that people could practise proper social
          distancing. We continue to support our suppliers around the world and have shared our best
          practices and lessons learned with partners across the industry.
        </p>
      </div>
      <div class="my-12 grid grid-cols-2 gap-6 border-t border-b border-gray-200 py-8">
        <div>
          <p class="text-4xl font-bold text-black">2M+</p>
          <p class="text-sm text-black">
            people in the Apple supply chain covered by our health and safety standards in 2020
          </p>
        </div>
        <div>
          <p class="text-4xl font-bold text-black">170+</p>
          <p class="text-sm text-black">
            member companies of the Responsible Business Alliance given access to our COVID response
            tools
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="grid grid-cols-3 gap-4">
  <div class="relative">
    <img src="photo1.jpg" alt="Photo 1" class="w-full h-full object-cover">
    <div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-50 transform transition-all duration-300 hover:scale-105">
      <h2 class="text-lg font-bold mb-2">Photo 1</h2>
      <p class="text-sm mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-red-500" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 18.785l-1.109-.981C3.78 12.42 1.5 9.492 1.5 6.5 1.5 3.462 3.962 1 7 1c1.857 0 3.558.873 4.5 2.221C12.542 1.873 14.243 1 16.1 1c3.038 0 5.5 2.462 5.5 5.5 0 2.992-2.28 5.92-8.391 11.304L10 18.785z"/>
        </svg>
        <p class="text-sm">10 likes</p>
      </div>
    </div>
  </div>
  <!-- Repeat for other photos -->
</div>

/* Grid */
.grid {
  margin-top: 2rem;
}

/* Photos */
img {
  border-radius: 0.5rem;
}

/* Overlapped cards */
.absolute {
  opacity: 0;
}

.relative:hover .absolute {
  opacity: 1;
}

/* Card title */
h2 {
  color: #333;
}

/* Card description */
p {
  color: #666;
}

/* Like icon */
svg {
  fill: currentColor;
}

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div class="relative">
    <img src="photo1.jpg" alt="Photo 1" class="w-full h-full object-cover">
    <div class="absolute bottom-0 left-0 right-0 p-4 bg-white bg-opacity-50 transform transition-all duration-300 hover:scale-105">
      <h2 class="text-lg font-bold mb-2">Photo 1</h2>
      <p class="text-sm mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-red-500" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 18.785l-1.109-.981C3.78 12.42 1.5 9.492 1.5 6.5 1.5 3.462 3.962 1 7 1c1.857 0 3.558.873 4.5 2.221C12.542 1.873 14.243 1 16.1 1c3.038 0 5.5 2.462 5.5 5.5 0 2.992-2.28 5.92-8.391 11.304L10 18.785z"/>
        </svg>
        <p class="text-sm">10 likes</p>
      </div>
    </div>
  </div>
  <!-- Repeat for other photos -->
</div>

/* Grid */
.grid {
  margin-top: 2rem;
}

/* Photos */
img {
  border-radius: 0.5rem;
}

/* Overlapped cards */
.absolute {
  opacity: 0;
}

.relative:hover .absolute {
  opacity: 1;
}

/* Card title */
h2 {
  color: #333;
}

/* Card description */
p {
  color: #666;
}

/* Like icon */
svg {
  fill: currentColor;
}

/* Responsive classes */
@media (min-width: 640px) {
  .grid-cols-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid-cols-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-cols-1 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}