JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
	<title>Fence — Shiny Demos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
	<div class="fence"></div>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 610" id="sign" class="sign">
		<path fill="#000" d="m598 500l-284-492c-3-5-8-8-14-8-6 0-11 3-14 8l-284 492c-3 5-3 11 0 16 3 5 8 8 14 8h568c6 0 11-3 14-8 3-5 3-11-0-16z">
		<polygon fill="#FD0" points="44 492 300 48 556 492">
		<path fill="#000" d="m280 166l-51 172 74-38-16 116-15-22 12 73 42-61-21 13 45-164-80 44 58-132-48 0z">
		<text text-anchor="middle" x="300" y="608" fill="#000" font-weight="bold" font-family="Trebuchet MS" font-size="80">DANGER AREA</text>
	</svg>
	<!-- Design and code by Vadim Makeev — pepelsbey.net -->
	<!-- Photo by John Carey — fiftyfootshadows.net -->
	<!-- Chainlink Fence texture — by psdgraphics.com -->
	<script src="/scripts/modernizr.js"></script>
	<script src="/scripts/panel.js"></script>
	<script src="scripts/options.js"></script>
	<script src="scripts/script.js"></script>
<script>
var sign = document.getElementById('sign'),
	body = document.body;

function openFence(e) {
	document.body.classList.toggle('opened');
	e.preventDefault();
}

sign.addEventListener('click', openFence, false);
sign.addEventListener('touchstart', openFence, false);
</script>

CSS

HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE,
DEL, DFN, EM, IMG, INS, KBD, Q, S, SAMP,
SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR,
B, U, I, CENTER,
DL, DT, DD, OL, UL, LI,
FIELDSET, FORM, LABEL, LEGEND,
TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD,
ARTICLE, ASIDE, CANVAS, DETAILS, EMBED,
FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP,
MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY,
TIME, MARK, AUDIO, VIDEO {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	}
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE,
FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
	display:block;
	}
BODY {
	line-height:1;
	}
OL, UL {
	list-style:none;
	}
BLOCKQUOTE, Q {
	quotes:none;
	}
BLOCKQUOTE:before, BLOCKQUOTE:after,
Q:before, Q:after {
	content:'';
	content:none;
	}
TABLE {
	border-collapse:collapse;
	border-spacing:0;
	}