JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<body>
    <div class="logo-wrapper"> 
        <span class="logo-fallback-wrapper">
          <span class="logo-fallback"></span>
        </span>
        
        <span class="logo-webfont-wrapper">
            <span class="logo-webfont"></span>
        </span>
    </div>
</body>

SCSS

@font-face {
    font-family: Duke;
    src: url(http://luisgerhorst.de/files/1-duke-font.otf);
}

.logo-wrapper {
    background: #19975D;
    
    .logo-webfont {
        &:before {
            color: #fff;
            font-size: 30px;
            content:"Nextdoor";
            display: block;
            font-family: Duke;
        }
    }
    
    // Wrap our fallback wrapper with display: none
    // and visibility: hidden on the logo-fallback.
    // Confirm that it's not loaded in your network tab (chrome console)
    .logo-fallback-wrapper {
        display: none;
        
        .logo-fallback {
            background: url(http://lifeprotips.s3.amazonaws.com/static/nd_logo.png);
            display: block;
            height: 35px;
            text-indent: -9999em;
            visibility: hidden;
            width: 161px;
        }
    }
}

.ie7 {
    .logo-wrapper {
        .logo-webfont-wrapper {
            display: none;
        }
        
        .logo-fallback-wrapper {
            display: block;
            
            .logo-fallback {
                visibility: visible;
            }
        }
    }
}

JavaScript

// Detect IE7 and add a target class to the body
if (navigator.appVersion.indexOf("MSIE 7.") !== -1) { // change `!==` to `===` to test this
    $('body').addClass('ie7');
}