<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-2 text-purple-700">play: at the resort</p>
        <i class="fas fa-anchor py-4 text-2xl"></i>
        <p class="text-gray-800 py-4">Because what would a resort be without pools, bikes, boats, a Day Spa, kids acitivites and more!  Get to know the Resort and all that is available for you.</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-6 px-8 text-xl">check out the resort</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-2 text-purple-700">play: at the resort</p>
        <i class="fas fa-anchor py-4 text-2xl"></i>
        <p class="text-gray-800 py-4">Because what would a resort be without pools, bikes, boats, a Day Spa, kids acitivites and more!  Get to know the Resort and all that is available for you.</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-6 px-8 text-xl">check out the resort</button>
        </div>
    </div>

</div>