No notes defined.
<div class="">
<a class="group" href="">
<div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
<div class="sm:aspect-w-4 sm:aspect-h-3">
<img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="https://picsum.photos/id/10/400/300" alt="Random Image">
</div>
<h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl tracking-wider text-red-600 uppercase">
Mountaineer Suite
</h3>
<div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">
<div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
View Details
</div>
</div>
</div>
</a>
</div>
<div class="">
<a class="group" href="">
<div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
<div class="sm:aspect-w-4 sm:aspect-h-3">
<img class="w-48 h-full sm:w-full sm:h-full object-center object-cover"
src="{{ image }}"
alt="Random Image"
>
</div>
<h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl tracking-wider text-red-600 uppercase">
{{ title }}
</h3>
<div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">
<div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
View Details
</div>
</div>
</div>
</a>
</div>
{
"title": "Mountaineer Suite",
"image": "https://picsum.photos/id/10/400/300"
}