<!--
@sources
https://play.tailwindcss.com/om6YbfPx0J
https://www.setrimsmalinou.cz/
-->

<!-- FROM LEFT TO RIGHT -->
<div class="relative h-[500px] border-2 border-black">
  <!-- image -->
  <div class="absolute inset-y-0 w-1/2 bg-red-300">
    <img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
  </div>

  <!-- container -->
  <div class="mx-auto flex h-full max-w-6xl justify-end border-2 border-green-500">
    <div class="w-1/2">Content ...</div>
  </div>
</div>

<!-- FROM RIGHT TO LEFT -->
<div class="relative h-[500px] border-2 border-black">
  <!-- image -->
  <div class="absolute inset-y-0 right-0 w-1/2 bg-red-300">
    <img src="https://picsum.photos/id/237/1500/1500" class="h-full w-full object-cover object-center" alt="" />
  </div>

  <!-- container -->
  <div class="mx-auto flex h-full max-w-6xl justify-start border-2 border-green-500">
    <div class="w-1/2">Content ...</div>
  </div>
</div>