JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Billion Satoshis</title>
		<script type="module">
			document.addEventListener('DOMContentLoaded', main);
			let cells = Math.pow(384,2);

			function main() {
				const view = document.getElementById('scroller');

				for (let i=0; i<cells; i++) {
					view.append(document.createElement('div'));
				}
			}
		</script>
	<style>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	h1 {
		font-size: 2rem;
	}

	html {
		font-size: 62.5%;
	}

	body {
		font-size: 1.6rem;
		font-family: sans-serif;
	}

	#view {
		width: calc(100vw - 2rem);
		height: calc(100vh - 10rem);
		margin: auto;
		background-color: #eee;
		overflow: auto;
		position: relative;
		border: 1px solid black;
	}

	#scroller {
    position: absolute;
    height: 100%;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(640, 10px);
		gap: 0;
	}

	header {
		text-align: center;
	}

	#scroller > div {
		display: block;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
		width: 10px;
		height: 10px;
	}
	</style>
  </head>

  <body>
    <header>
      <h1>Billion Satoshis</h1>
			<p>Pixel based advertising for crypto</p>
			<p><small>$1/square (svg only)</small></p>
    </header>
    <section id="view">
			<section id="scroller"></section>
		</section>
  </body>
</html>