JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<header>This is the &lt;header&gt; with a CSS background gradient.<br>It will flicker in Safari when you hover over the figure below and the window is at least 2000px wide.</header>
<figure>
	<pre>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="utf-8" /&gt;
	&lt;title&gt;My website!&lt;/title&gt;
	&lt;link rel="stylesheet" type="text/css" href="<mark>http://web.com/1234/fonts.css</mark>"/&gt;
&lt;/head&gt;
&lt;body&gt;</pre>
</figure>

CSS

header {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(16, 15, 14)), color-stop(0.45, rgb(40, 36, 35)), color-stop(0.85, rgb(52, 47, 45)));
    background-image: -webkit-linear-gradient(rgb(16, 15, 14), rgb(40, 36, 35) 45%, rgb(52, 47, 45) 85%);
    background-image: -moz-linear-gradient(rgb(16, 15, 14), rgb(40, 36, 35) 45%, rgb(52, 47, 45) 85%);
    background-image: -o-linear-gradient(rgb(16, 15, 14), rgb(40, 36, 35) 45%, rgb(52, 47, 45) 85%);
    background-image: linear-gradient(rgb(16, 15, 14), rgb(40, 36, 35) 45%, rgb(52, 47, 45) 85%);
    background-color: rgb(52, 48, 46);
    color: white;
	font: bold 13px/20px "Helvetica Neue", Helvetica, Courier, Monaco, monospace;
    padding: 50px;
    text-align: center;
}
figure pre {
	-webkit-animation-duration: 400ms;
	animation-duration: 400ms;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
	-webkit-transform: scale(1, 1) rotateZ(0deg);
	transform: scale(1, 1) rotateZ(0deg);
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
	-webkit-transition-property: transform, opacity, box-shadow;
	transition-property: transform, opacity, box-shadow;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-user-select: none;
	user-select: none;
	background: rgb(255, 255, 255);
	color: rgb(153, 153, 153);
	font: normal 13px/21px Courier, Monaco, monospace;
	height: 207px;
	padding: 24px;
	position: absolute;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -pre-wrap;
	white-space: pre-wrap;
	width: 352px;
	word-wrap: break-word;
	z-index: 1;
}
figure:hover pre {
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 3px...