JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big-box">
			<div class="little-box little-box-1">Box 1</div>
			<div class="little-box little-box-2">Box 2</div>
			<div class="little-box little-box-3">Box 3</div>
			<div class="little-box little-box-4">Box 4</div>
			<div class="little-box little-box-5">Box 5</div>
			<div class="little-box little-box-6">Box 6</div>
		</div>

CSS

body {
		padding:0;
		margin:0;
	}
	.big-box {
		margin:0 auto;
		width:100vw;
		height:100vh;
		max-height:1000px;
		max-width:1500px;
		position:relative;
		background-color:#f2f2f2;
	}
	.little-box {
		width:8%;
		height:8%;
		background-color:#4260D3;
		text-align:center;
		vertical-align:middle;
	}
	.little-box-1 {
		position:absolute;
		top:5%;
		left:5%;
		border-radius:50%;
	}
	.little-box-2 {
		position:absolute;
		top:15%;
		left:15%;
	}
	.little-box-3 {
		position:absolute;
		top:25%;
		left:25%;
	}
	.little-box-4 {
		position:absolute;
		top:50%;
		left:50%;
	}
	.little-box-5 {
		position:absolute;
		top:90%;
		left:15%;
	}
	.little-box-6 {
		position:relative;
		top:25%;
		left:90%;
	}
	@viewport {
	  orientation: landscape;
	}