JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<h1><b data-content="M">M</b><span>11</span></h1>
<h2>WTCN-TV<b>Minneapolis St. Paul</b></h2>

CSS

* { margin: 0; padding: 0; }

html,
body { 
    height: 100%;    
    margin: 0; padding: 0;
}

body {     
    min-height: 100%; 
    background: black;
    width: 20.75rem;
    margin: 0 auto;
    font-family: 'Arial' sans-serif;
    font-weight: bold;
    position: relative;
}

h1 {
    font-size: 10rem;
    position: relative;
    color: #2359D7;
}

h1:before { 
    position: absolute;
    content:"";
    top: 2rem;
    left: 7.5rem;
    height: 7.2rem;
    background: #2359D7;
    width: 5.75rem;
}

h1 b:after {
    z-index: 1;
    position: absolute;
    left: 7rem;
    top: 0;;
    content: attr(data-content);
    color: #000;
}

h1 span { 
    z-index: 3;
    position: relative;
    left: 4.9rem; 
    letter-spacing: -2rem;
    color: #fff;
}

h2 { 
    color: yellow;
    margin-top: -1.7rem;    
    text-align: right;
}

h2 b { 
    display: block;
    color: white;
}

JavaScript

// http://www.google.com/imgres?imgurl=http://www.duncow.com/story_files/kttv70s.jpg&imgrefurl=http://moviestildawn.blogspot.com/2008/06/logo-land-my-youth-and-how-i-spent-it.html&usg=__fp7D5y6jQs25_xLrLkLWvGxx2k0=&h=240&w=320&sz=9&hl=en&start=517&zoom=1&tbnid=RyHjzXjq8LIttM:&tbnh=89&tbnw=118&ei=_GlpTuC9LaXnsQLAiom5Bg&prev=/search%3Fq%3D1970%2527s%2Blogos%26start%3D225%26hl%3Den%26safe%3Doff%26sa%3DX%26nord%3D1%26biw%3D1376%26bih%3D1213%26site%3Dwebhp%26output%3Dimages_json%26tbm%3Disch%26prmd%3Divns&chk=sbg&itbs=1

// http://youtu.be/j7DPNQdCuYw