JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="logoHolder">
    <div class="logoIcon"></div>
    <div class="logoName"></div>
</div>

CSS

/* Desktops and laptops ----------- */
 @media (min-width: 1200px) {
    .logoHolder {
        width:368px;
        height:200px;
        margin:5% auto;
    }
    .logoIcon {
        width:104px;
        height:200px;
        background:url(http://favoritewindowsltd.co.uk/logo/logoIcon.png);
    }
    .logoName {
        margin-top:-200px;
        margin-left:104px;
        width:264px;
        height:200px;
        background:url(http://favoritewindowsltd.co.uk/logo/logoName.png) white;
    }
}
/* Tablet ----------- */
 @media (max-width: 1199px) {
    .logoIcon {
        opacity:0;
        width:80px;
        height:200px;
        background:url(http://favoritewindowsltd.co.uk/logo/logoIcon.png) no-repeat;
        background-size:auto 150px;
        -webkit-animation: myfirst 1.5s 2s forwards;
    }
    .logoName {
        margin-top:-200px;
        margin-left:80px;
        width:264px;
        height:200px;
        background:url(http://favoritewindowsltd.co.uk/logo/logoName.png) white no-repeat;
        background-size:auto 150px;
    }
}