JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="hu">
<head>
	<meta name="viewport" content="width=device-width">
	<meta name="charset" content="UTF-8" />
	<style>
	body {
		text-align: center; font-family: Arial, sans-serif; margin: 0;

		font-size: 3vw;
	}


	@media only screen and (min-width: 960px) {
		body {
			font-size: 1vw;
		}
	}

	#counters
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: fixed;
	}

	h1 { font-size: 8em; margin: 0; }
	h2 { font-size: 3em; margin: 0.5em 0;}
	h3 { font-size: 2em; margin: 0; font-weight: 400; }
	h6 { font-size: 1.5em; margin: 0.25em 0; font-weight: 400; color: #ccc; position: absolute; bottom: 0;}
	img { width: 40em; max-width: 100%; border: 1px solid #000; margin: -1px; flex: 0 1 auto; }

	.small { font-size: 0.25em; }

	</style>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script>
	
		// Újév ideje
		var newYear = new Date("Jan 1, 2020, 00:00");
		// Aktuális időzóna
		var timezoneOffset = newYear.getTimezoneOffset();
		// Újév epoch
		newYear = newYear.getTime();
	
		// Időzónák
		var zones = {
			'-12.0': { 
				title: "Baker-sziget",
				flag: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Flag_of_Baker_island_unofficial.svg',
				drink: "Igyál a Baker-sziget lakóira!" 
			},
			'-11.0': { 
				title: "Niue",
				flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_Niue.svg',
				drink: "Igyál a Niuére!"  
			},
			'-10.0': { 
				title: "Hawaii",
				flag: 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Flag_of_Hawaii.svg',
				drink: "Igyál Hawaiira!"
			},
			'-9.0': { 
				title: "Alaszka",
				flag: 'https://upload.wikimedia.org/wikipedia/commons/e/e6/Flag_of_Alaska.svg',
				drink: "Igyál Alaszkára!"
			},
			'-8.0': { 
				title: "Kalifornia",
				flag:...