JSFiddle - React, Tailwind, and code Playground

by _bop

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>CSS3 Reflections</title>
        <meta name="description" content="Reflection..." />
        <meta name="author" content="Bob de Ruiter" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        
        <link rel="stylesheet" href="style.css" />
        
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    </head>
    <!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
    <!--[if IE 9 ]> <body class="ie9"> <![endif]-->    
    <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
        <div id="plane">
            <header><span id="etbr">reflection<span id="refl">reflection</span></span></header>
        </div>
    </body>
</html>

CSS

html {
    height: 100%;
}
body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}
p {
    line-height: 1.2;
}
#plane {
    left: 0;
    top: 10%;
    width: 100%;
    bottom: 0;
    min-width: 1080px;
    min-height: 600px;
    position: absolute;
    overflow: hidden;
    overflow-x: visible;
}
#etbr, #refl {
    
}
#refl {
    display: none;
}