thestriver/gist:05419c8215c039aeed3630d7e34e6732

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ethereum Blockchain Explorer</title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    </head>
    <body>
        <div class="py-10">
            <div class="text-center">
                <img src="img/ethereum-logo.png" class="w-1/3 h-1/2 mx-auto" alt="logo">
                <p class="py-5" >A simple Ethereum Blockchain Explorer that displays the last 10 transactions with selected details</p>
            </div>

            <div class="flex flex-col">
                <div class="my-2 overflow-x-auto sm:mx-6 lg:mx-2">
                    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-3">
                        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                        <table class="min-w-full divide-y divide-gray-200 px-10 ">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Block Number
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Address
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Hash
                                </th>
                                <th scope="col" class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Timestamp
                                </th>
                            </tr>
                            </thead>
                            <tbody class="bg-white divide-y-2 divide-gray-100 ">

                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
        <!-- Web3 -->
        <script src="js/web3.min.js"></script>

        <script>
            const provider = ''; // Add your quiknode HTTP provider link here
            const web3Provider = new Web3.providers.HttpProvider(provider);
            const web3 = new Web3(web3Provider);
            // web3.eth.getBlock('latest').then(answer => console.log(answer))
            // web3.eth.getBlockNumber().then(blockNum => console.log(blockNum))

            web3.eth.getBlockNumber().then(blockNum => {
                //loop through and get the last 10
                for (let i = 0; i < 10; i++) {
                    web3.eth.getBlock(blockNum - i).then(answer => {
                        $('tbody').append("<tr><td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>" + answer.number + "</td><td>" + answer.author + "</td><td class='text-gray-600 text-sm'>" + answer.hash + "</td><td class=' px-2 py-1 mt-3 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800'>" + answer.timestamp + "</td></tr>");
                    })
                }
            })

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Ethereum Blockchain Explorer</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

	</head>
	<body>
	<div class="py-10">
	<div class="text-center">
	<img src="img/ethereum-logo.png" class="w-1/3 h-1/2 mx-auto" alt="logo">
	<p class="py-5" >A simple Ethereum Blockchain Explorer that displays the last 10 transactions with selected details</p>
	</div>

	<div class="flex flex-col">
	<div class="my-2 overflow-x-auto sm:mx-6 lg:mx-2">
	<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-3">
	<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
	<table class="min-w-full divide-y divide-gray-200 px-10 ">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Block Number
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Address
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Hash
	</th>
	<th scope="col" class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	Timestamp
	</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y-2 divide-gray-100 ">

	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	</div>
	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script>
	<!-- Web3 -->
	<script src="js/web3.min.js"></script>

	<script>
	const provider = ''; // Add your quiknode HTTP provider link here
	const web3Provider = new Web3.providers.HttpProvider(provider);
	const web3 = new Web3(web3Provider);
	// web3.eth.getBlock('latest').then(answer => console.log(answer))
	// web3.eth.getBlockNumber().then(blockNum => console.log(blockNum))

	web3.eth.getBlockNumber().then(blockNum => {
	//loop through and get the last 10
	for (let i = 0; i < 10; i++) {
	web3.eth.getBlock(blockNum - i).then(answer => {
	$('tbody').append("<tr><td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>" + answer.number + "</td><td>" + answer.author + "</td><td class='text-gray-600 text-sm'>" + answer.hash + "</td><td class=' px-2 py-1 mt-3 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800'>" + answer.timestamp + "</td></tr>");
	})
	}
	})

	</script>
	</body>
	</html>