JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<h2>aeiou</h2>
<h2 class="boo">aeiou</h2>

CSS

@font-face {   
    font-family: 'Ultra';   
    font-style: normal;   
    font-weight: normal;   
    src: local('Ultra'), url('http://themes.googleusercontent.com/static/fonts/ultra/v4/Uwyb9czCiEZ7UnGAgIR6JA.woff') format('woff'); 
}

@font-face {   
    font-family: 'UltraBold';   
    font-style: normal;   
    font-weight: bold;   
    src: local('Ultra'), url('http://themes.googleusercontent.com/static/fonts/ultra/v4/Uwyb9czCiEZ7UnGAgIR6JA.woff') format('woff'); 
}

body {
    background: indianred;
}    
h2 { font-family: 'Ultra', serif; font-size: 8em; line-height: 1; }

h2.boo { font-family: 'UltraBold', serif; }

h2 { 
    position: absolute; 
    color: rgba(255, 255, 255, 0.2); 
    left: 0; right: 0; 
    text-align: center;
}