JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div style="height: 1000px; width: 1000px; background: red;">a</div>
<h1>adam</h1>
<h2>adam</h2>
<img src="http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2011/07/rubbik.jpg" />

<!--
http://www.instantshift.com/2009/02/16/104-free-fonts-for-web-designers-and-logo-artists/
http://www.fontsquirrel.com/fontface/generator
-->

CSS

h2 {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 150px;
font-weight: bold;
letter-spacing: -4.05px;
color: #fff;
    /*
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,0.3)), to(rgba(0, 0, 0, 1)));
    */
-webkit-mask-image: -webkit-gradient(radial, 230 0, 0, 230 0, 400, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
line-height: 100px;
background: #efefef;
padding: 100px 150px;

text-shadow:
-2px -1px 1px rgba(255, 255, 255, 1),
2px 2px 2px rgba(60, 60, 60, 0.5),
4px 4px 2px rgba(60, 60, 60, 0.4),
6px 6px 2px rgba(60, 60, 60, 0.3),
8px 8px 2px rgba(60, 60, 60, 0.2),
15px 15px 5px rgba(90, 90, 90, 0.2),
18px 18px 4px rgba(90, 90, 90, 0.1);

position: absolute;
top: 0px;
}







h1 {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 150px;
font-weight: bold;
letter-spacing: -4.05px;
color: #ccc;
line-height: 100px;
background: #aaa;
padding: 100px 150px;

text-shadow:
-2px -1px 1px rgba(255, 255, 255, 1),
2px 2px 2px rgba(60, 60, 60, 0.5),
4px 4px 2px rgba(60, 60, 60, 0.4),
6px 6px 2px rgba(60, 60, 60, 0.3),
8px 8px 2px rgba(60, 60, 60, 0.2),
15px 15px 5px rgba(90, 90, 90, 0.2),
18px 18px 4px rgba(90, 90, 90, 0.1);

position: absolute;
top: 0px;
}






img { position: absolute;
top: 400px;
 }