JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<script>
	var xmlhttp = new XMLHttpRequest();
	var url = "https://www.googleapis.com/youtube/v3/channels?part=snippet,contentDetails&id=頻道序號&key=你自己的憑證金鑰&maxResults=50";

	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			var myArr = JSON.parse(xmlhttp.responseText);
			myChannel(myArr.items[0].contentDetails.relatedPlaylists.uploads);
		}
	}
	xmlhttp.open("GET", url, true);
	xmlhttp.send();
	
	function myChannel(pid) {
		var xmlhttp = new XMLHttpRequest();
		var url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&playlistId=" + pid + "&key=你自己的憑證金鑰&maxResults=50";

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var myArr = JSON.parse(xmlhttp.responseText);
				myFunction(myArr);
			}
		}
		xmlhttp.open("GET", url, true);
		xmlhttp.send();
	}

	function myFunction(arr) {
		var data = arr.items;
		var out = "";
		var i;
		for (i = 0; i < data.length; i++) {
			out += '<img src="' + data[i].snippet.thumbnails.default.url + '" />';
			out += '<p><a href="https://youtu.be/' + data[i].snippet.resourceId.videoId + '" target="_blank">' + data[i].snippet.title + '</a></p>';
			out += data[i].contentDetails.videoPublishedAt.substr(0,10);
			out += '<p> </p>';
		}
		document.getElementById("youtube-playlist").innerHTML = out;
	}
	</script>
</head>
<body>
	<div id="youtube-playlist">
	</div>
</body>
</html>