<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
</div>
<div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
<p class="uppercase text-4xl py-6 text-purple-700">studio suite</p>
<div class="flex items-center justify-center space-x-6">
<div class="flex items-center">
<i class="fas fa-bed py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">sleeps 2</p>
</div>
<div class="flex items-center">
<i class="fas fa-chart-area py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">350sq ft</p>
</div>
<div class="flex items-center">
<i class="fas fa-utensils py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">kitchen</p>
</div>
</div>
<p class="text-gray-800 py-4 text-lg">The perfect place for two. One large room with everything you need.</p>
<div class="py-6">
<button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse">
<div class="md:w-1/2">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
</div>
<div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
<p class="uppercase text-4xl py-6 text-purple-700">play: at the resort</p>
<div class="flex items-center justify-center space-x-6">
<div class="flex items-center">
<i class="fas fa-bed py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">sleeps 4</p>
</div>
<div class="flex items-center">
<i class="fas fa-chart-area py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">550sq ft</p>
</div>
<div class="flex items-center">
<i class="fas fa-utensils py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">kitchen</p>
</div>
</div>
<p class="text-gray-800 py-4">Expect more space than our studio suite, and a private bedroom. This suite gives you a larger layout for quality down-time.</p>
<div class="py-6">
<button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
</div>
<div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
<p class="uppercase text-4xl py-6 text-purple-700">studio suite</p>
<div class="flex items-center justify-center space-x-6">
<div class="flex items-center">
<i class="fas fa-bed py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">sleeps 2</p>
</div>
<div class="flex items-center">
<i class="fas fa-chart-area py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">350sq ft</p>
</div>
<div class="flex items-center">
<i class="fas fa-utensils py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">kitchen</p>
</div>
</div>
<p class="text-gray-800 py-4 text-lg">The perfect place for two. One large room with everything you need.</p>
<div class="py-6">
<button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse">
<div class="md:w-1/2">
<img class="object-cover w-full h-full" src="https://source.unsplash.com/random/800x600" alt="">
</div>
<div class="w-full md:w-1/2 text-center my-auto py-8 px-8">
<p class="uppercase text-4xl py-6 text-purple-700">play: at the resort</p>
<div class="flex items-center justify-center space-x-6">
<div class="flex items-center">
<i class="fas fa-bed py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">sleeps 4</p>
</div>
<div class="flex items-center">
<i class="fas fa-chart-area py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">550sq ft</p>
</div>
<div class="flex items-center">
<i class="fas fa-utensils py-4 text-xl"></i>
<p class="pl-2 uppercase text-sm">kitchen</p>
</div>
</div>
<p class="text-gray-800 py-4">Expect more space than our studio suite, and a private bedroom. This suite gives you a larger layout for quality down-time.</p>
<div class="py-6">
<button class="uppercase border-2 border-green-400 text-green-400 hover:border-green-500 hover:text-green-500 py-4 px-6">have a look</button>
</div>
</div>
</div>
/* No context defined. */