JSFiddle - React, Tailwind, and code Playground

by Arjan Haverkamp

HTML

<!doctype html>
		<html>
		<head>
		<title>MapImage poster</title>
		<style>

		body { margin:0; padding:1rem; font: 14pt Arial, Helvetica, sans-serif; }
		h1 { font-size: 16pt; margin: 0; }

		header {
			box-shadow: inset 0 .25em .75em #0000001a,inset 0 .062em .25em #00000026;
			text-align: center;
			padding: 1rem;
		}

		footer {
			background-color: #f8f9fa;
			border: 1px solid #dee2e6;
			padding: 1rem;
			text-align: center;
		}

		.wrap {
			display: flex;
			gap: 1rem;
		}

		.left, .right {
			flex: 1 1 0;
		}

		@media (max-width: 700px) {
			.wrap {
				flex-direction: column;
			}
		}

		</style>
		</head>
		<body>
		<header>
			<a href="https://www.mapimage.webgear.nl"><img src="https://mapimage.webgear.nl/pics/mapimage-logo.png" height="65" alt="MapImage.com"></a>
			<h1>MapImage poster</h1>
		</header>
		<main><div class="wrap">
	<div class="left">
		<p>
		Hello [email protected]
		</p><p>
		Download your MapImage poster via the links below:
		</p>
		<ul>
		<li><a href="https://mapimage.webgear.nl/tmp/6911b80cb3417.png">PNG</a> 2.6MB</li>
		<li><a href="https://mapimage.webgear.nl/tmp/6911b80cb3417.jpg">JPEG</a> 2.0MB</li>
		<li><a href="https://mapimage.webgear.nl/tmp/6911b80cb3417.webp">WebP</a> 330.0KB</li>
		</ul>
		<p>With kind regards,<br>The MapImage team.</p>
	</div>
	<div class="right">
		<img src="https://mapimage.webgear.nl/tmp/6911b80cb3417.jpg" style="max-width:100%;height:auto;border-radius:.5rem">
	</div>
</div></main>
		<footer>&copy; Zygomatic</footer>
		</body>
		</html>