JSFiddle - React, Tailwind, and code Playground

by spn99

HTML

<div id="app">
		<image class="logo" src="https://bitquery.io/wp-content/uploads/2021/11/Bitquery-RGB-White-Title-1024x328.png"></image>
		<div class="container container__left">
			<div class="item number"></div>
			<div class="item plug"></div>
			<div class="item cover"></div>
			<div id="trades" class="item trades">
			</div>
		</div>
		<div class="container container__middle">
			<div id="datetime" class="datetime"></div>
			<div class="token-price-exchange">
				<div id="price" class="price">--/--</div>
				<div class="token">WBNB/USDT</div>
				<div class="exchange"></div>
			</div>
		</div>
		<div class="container container__right">
		</div>
		<div class="nft"></div>
	</div>

SCSS

.red {
	color: red;
}
.green {
	color: green
}
@keyframes falling {
	0% {
		top: 0;
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}
#app {
	.nft {
		height: 10vmax;
		width: 10vmax;
		z-index: 15;
		position: absolute;
		background-size: cover;
		top: 0;
		animation: falling 10s;
		animation-iteration-count: 1;
	}
	font-family: 'swiss921-bt-regular', sans-serif;
	background-color: #000;
	color: #ececec;
	font-size: 1.5vmax;
	display: flex;
	width: 100vw;
	height: 100vh;
	position: relative;
	.logo {
		position: absolute;
		z-index: 20;
		top: 50px;
		right: 7vmax;
		height: 50px;
	}
	.container {
		display: flex;
		flex-direction: column;
		flex: 1 1 33%;
		height: 100%;
		&__left {
			position: relative;
			.item {
				display: flex;
				padding-left: 7vmax;
				&.number {
					padding-top: 50px;
					flex: 0 1 20%;
				}
				&.plug {
					position: relative;
					flex-direction: column;
					flex: 0 1 80%;
					justify-content: flex-end;
				}
				&.cover {
					position: absolute;
					height: 80vh;
					width: 100vw;
					top:0;
					background-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 50%, rgba(0,0,0,1) 100%);
					z-index: 10;
				}
				&.trades {
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					bottom: 0;
					height: 80vh;
					width: 100vw;
					font-size: 26px;
					opacity: .8;
					padding-left: 3vmax;
					.trades__row {
						display: flex;
						width: 100%;
						height: 40px;
					}
					.trades__column {
						display: flex;
						flex: 1;
						justify-content: flex-start;
						&.time {
							flex-basis: 15%;
						}
						&.address {
							flex-basis: 25%;
						}
						&.action {
							flex-basis: 35%;
						}
						&.forprice {
							flex-basis: 25%;
						}
					}
				}
			}
		}
		&__middle {
			z-index: 20;
			justify-content: center;
			align-items: center;
			.token-price-exchange{
				display: flex;
				flex-direction:...

JavaScript

import {createClient} from 'https://cdn.skypack.dev/[email protected]'

setInterval(() => document.getElementById("datetime").innerHTML = new Date().toLocaleString('en-SG', {
    timeZone: 'Asia/Singapore',
    hour12: false
}), 1)

const client = createClient({
    url: 'wss://streaming.bitquery.io/graphql'
});

const maxSize = 10
const minTime = 7

const defaultImage = 'https://png.pngtree.com/png-vector/20220721/ourmid/pngtree-nft-coin-non-fungible-token-vector-illustration-png-image_6028556.png'

const addNft = async (url, name, id) => {
    const nft = document.createElement('div')
    nft.classList.add('nft')
    if (url != null) {
        const response = await fetch(url)
        const imageBlob = await response.blob()
        const imageObjectURL = URL.createObjectURL(imageBlob)
        nft.style.backgroundImage = `url(${imageObjectURL})`
    } else {
        nft.style.backgroundImage = `url(${defaultImage})`
    }
    const coeff = Math.floor(Math.random() * (100 - 50 + 1) + 50) / 100
    const size = maxSize * coeff
    nft.style.height = `${size}vmax`
    nft.style.width = `${size}vmax`
    const animationTime = minTime / coeff <= minTime ? minTime : minTime / coeff
    nft.style.animationName = `falling`
    nft.style.animationTimingFunction = 'linear'
    nft.style.animationIterationCount = 1
    nft.style.animationDuration = `${parseInt(animationTime * 1000)}ms`
    const appearancePoint = Math.random() * (window.innerWidth - (0.1 * window.innerHeight))
    nft.style.left = `${appearancePoint}px`
    nft.style.zIndex = parseInt(100 * coeff)
    const app = document.getElementById('app')
    const nftName = document.createElement('span')
    nftName.style.width = `calc(${size}vmax)px`
    nftName.style.fontSize = `${size / 6}vmax`
    const readableId = id.length > 8 ? `${id.substring(0, 8)}...` : id
    nftName.innerHTML = name ? `${name} #${readableId}` : ''
    nft.appendChild(nftName)
    app.appendChild(nft)
    setTimeout(() => {
       ...