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>
			let cells = 6400;
			document.addEventListener('DOMContentLoaded', main);

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

				for (let i=0; i<cells; i++) {
					const el = document.createElement('div');

					el.classList.add('cell');
					grid.push(el);
				}

				view.append(...grid);
			}
		</script>
	<style>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
	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;
	}

	#scroller {
    position: absolute;
    height: 100%;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(80, 1rem);
		gap: 0;
		border-top: 1px solid black;
		border-left: 1px solid black;
	}

	header {
		text-align: center;
	}

	.cell {
		border-right: 1px solid black;
		border-bottom: 1px solid black;
		width: 1rem;
		height: 1rem;
	}
	</style>
  </head>

  <body>
    <header>
      <h1>Billion Satoshis</h1>
      <p>Pixel based advertising for Bitcoin.</p>
    </header>
    <section id="view">
			<section id="scroller"></section>
		</section>
  </body>
</html>