JSFiddle - React, Tailwind, and code Playground

by Dar_T

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div id="splash">
    <div class="square">
        <p style="padding-top: 19px; padding-right: 25px; padding-left: 29px;">Darrien</p>
        <p style="margin-top:170px;margin-left:370px;">Tu.</p>
        <span class="l1"></span>
        <span class="l2"></span>
        <span class="l3"></span>
        <span class="l4"></span>
    </div>
</div>

<div id="stuff"> HEY THERE! </div>

CSS

#stuff { height:100%; width:100%; background-color:#141414; }

#dar {
    margin-top: 19px;
    margin-left: 29px
}
#tu {
    margin-top: 175px;
    margin-left: 379px
}
#splash {
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999999;
    position: fixed
}
.square {
    color: #0D0D0D;
    font-family: 'NimbusSansNo5TOT-Medium';
    font-size: 47px;
    letter-spacing: -1px;
    display: block;
  margin: auto;
  position: absolute;
  top: -15%; left: 0; bottom: 0; right: 0;


    width: 455px;
    height: 230px
}
.l1,
.l2,
.l3,
.l4 {
    position: absolute;
    background: transparent;
    width: 0px;
    height: 0px;
    background-color: black;
    color: #0D0D0D
}
.l1 {
    left: 0;
    bottom: 0;
    width: 10px
}
.l2 {
    top: 0;
    left: 0;
    height: 10px
}
.l3 {
    right: 0;
    top: 0;
    width: 10px
}
.l4 {
    bottom: 0;
    right: 0;
    height: 10px
}

JavaScript

$(document).ready(function() {
	
	$("#splash,#name").show();
		
   var mql = window.matchMedia('(max-width: 479px), (max-height: 480px)');
function smallBlock() {
    setTimeout(function () {
        TweenLite.defaultEase = Linear.easeNone;
        TweenLite.set('.square', { visibility: 'visible' });
        var tl = new TimelineLite();
        tl.fromTo('.l1', 2, { height: 0 }, { height: 27 });
        tl.fromTo('.l2', 3, { width: 0, }, { width: 45 });
        tl.fromTo('.l3', 2, { height: 0 }, { height: 27 });
        tl.fromTo('.l4', 3, { width: 0 }, { width: 45 });
        tl.timeScale(4);
    }, 600);
};
function largeBlock() {
    setTimeout(function () {
        TweenLite.defaultEase = Linear.easeNone;
        TweenLite.set('.square', { visibility: 'visible' });
        var tl = new TimelineLite();
        tl.fromTo('.l1', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l2', 3, { width: 0, }, { width: 445 });
        tl.fromTo('.l3', 2, { height: 0 }, { height: 227 });
        tl.fromTo('.l4', 3, { width: 0 }, { width: 445 });
        tl.timeScale(4);
    }, 600);
}
function handleScreen(mql) {
    mql.matches ? smallBlock() : largeBlock();
}
mql.addListener(handleScreen);
handleScreen(mql);

handleScreen(mql).promise().done(function() {
   setTimeout(function() {
            $("#name,#splash").fadeOut("slow");
        }, 1000);
});
    });