JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<div class="bg"></div>
<div class="content">NextLocal Advertising</div>

CSS

@font-face{font-family:'ProximaNova';src:url("/fonts/ProximaNova-Sbold-webfont.woff");font-weight:500;font-style:normal}
@font-face{font-family:'ProximaNova';src:url("/fonts/ProximaNova-Reg-webfont.woff");font-weight:400;font-style:normal}
@font-face{font-family:'ProximaNova';src:url("/fonts/ProximaNova-Light-webfont.woff");font-weight:300;font-style:normal}
.bg {
    background-image: linear-gradient(to bottom, #2163C6, #219EC5);
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat-y;
}
.content {
    mix-blend-mode: screen;
    height: 100%;
    color: #000;
    background-color: #FFF;
    font:bolder 24px ProximaNova,sans-serif;
    text-transform:uppercase
    padding:3px;
}