JSFiddle - React, Tailwind, and code Playground

by ryan Couch

HTML

<div class="grid">
        <div class="grid-content">
            <div class="grid-center">
                <div class="loading">
                    <h1>Loading...</h1>
                    <div class="spinner">
                        <div class="spin1"></div>
                        <div class="spin2"></div>
                        <div class="spin3"></div>
                        <div class="spin4"></div>
                        <div class="spin5"></div>
                    </div>
                </div>
            </div>
				</div>
			</div>

CSS

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #fff;
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-image: linear-gradient(red, yellow);
}

.center {
    margin: auto;
}

.grid {
    display: grid;
    width: 100vw;
    height: 100vh;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.grid-content {
    grid-template-areas: 
        '. center center center .'
        '. center center center .'
        '. joke joke joke btn';
}

.loading {
    margin: auto;
}

	.loading > h1 {
		color: #fff;
		font-size: 40px;
	}

.hg-font {
    font-size: 4vh;
}

.glow {
    filter: drop-shadow(0 0 80px rgba(255, 255, 255, .7));
}

.grid-center {
    padding-top: 50px;
    grid-area: center;
    align-content: center;
}

.grid-joke {
    grid-area: joke;
    align-content: center;
}

.fixed-button {
    min-width: 420px;
}

.grid-btn {
    grid-area: btn;
    align-content: center;
}

.thanks {
    padding: 20px;
    opacity: .7;
}

@media(max-width:1280px) {
    #gitlink {
        display: none;
    }
}


@media(max-width:768px) {
    #gitlink {
        display: none;
    }
}

.spinner {
    margin: 100px auto;
    width: 100px;
    height: 80px;
    text-align: center;
    font-size: 10px;
}

    .spinner > div {
        background-color: azure;
        height: 100%;
        width: 12px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .spin2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .spin3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .spin4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .spin5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
   ...