JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.com/static/img/cadre-photo.png"></script>
<body>
	<div class="left">
		<div class="head"></div>
		<div class="body">
			Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
		</div>
		<div class="foot"></div>
	</div>
</body>

CSS

.left {
	width:167px;
	float:left;
}

.head {
	width:167px;
	height:15px;
	background:url('https://terre-noire.com/static/img/cadre-photo.png') top no-repeat;
}

.body {
	background:url('https://terre-noire.com/static/img/cadre-photo.png') repeat-y;
	background-position-y: -45px;
}

.foot {
	background:url('https://terre-noire.com/static/img/cadre-photo.png') no-repeat bottom;
	width:167px;
	height:30px;
}