On gists

Image from edge to container

Tailwind CSS CSS

index.html Raw #

<!--
@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>

index2.html Raw #

<!--
rss.app
https://jsbin.com/johocuqohi/edit?html,css,output
-->

<style>
  
  body {
	overflow: hidden;
}

.wrapper {
	outline: 2px solid #000;
	max-width: 600px;
	display: flex;
	margin: auto;
	
}

.left {
	background: hotpink;
	max-width: 50%;
	min-width: 50%;
}

.right {
	max-width: 50%;
	min-width: 50%;
	background: lime;
	
	img {
		max-height: 500px;
		width: auto
	}
}


</style>



	<div class="wrapper">
		<div class="left">Ahoj já jsem nějaký text</div>
		<div class="right">
			další text
			<div>
				<img src="https://rss.app/static/img/landing/RSSFeeds2.webp" alt="">
			</div>
		</div>
		
	</div>