JSFiddle - React, Tailwind, and code Playground

by purrfectt

HTML

<div id="DIV_105">
	<div id="DIV_106">
		<div id="DIV_1">
			<a href="javascript:window.history.back();" id="A_2"></a>
			<div id="DIV_3">
				 <a href="/prowl/224132" id="A_4"> <span id="SPAN_5"><span id="SPAN_6"></span></span><span id="SPAN_7">2</span></a> <a href="/love/item/224132" id="A_8"> <span id="SPAN_9"><span id="SPAN_10"></span></span><span id="SPAN_11">4</span></a>
				<div id="DIV_12">
					Share<span id="SPAN_13"></span>
					<ul id="UL_14">
						<li id="LI_15">
							<a href="javascript:(function(){ window.open('https://www.facebook.com/sharer/sharer.php?u=http://www.theprowl.com/item/224132/coffee_mug_shhh_theres_wine','sharer', 'width=626,height=336') })();" id="A_16"><span id="SPAN_17"></span> Facebook</a>
						</li>
						<li id="LI_18">
							<a href="javascript:(function(){ window.open('http://twitter.com/share?url=http://www.theprowl.com/item/224132/coffee_mug_shhh_theres_wine','sharer','width=626,height=236') })();" id="A_19"><span id="SPAN_20"></span> Twitter</a>
						</li>
						<li id="LI_21">
							<a href="javascript:(function(){ window.open('http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.theprowl.com%2Fitem%2F224132%2Fcoffee_mug_shhh_theres_wine&media=http%3A%2F%2Fugc-01.cafemomstatic.com%2Fgen%2Ffull%2F2014%2F04%2F13%2F12%2F7k%2Fld%2Fgejnbupa4g1.jpg&description=Coffee%20Mug%20-%20Shhh...%20There%5C%27s%20Wine%20In%20Here','sharer','width=626,height=236') })();" id="A_22"><span id="SPAN_23"></span> Pinterest</a>
						</li>
						<li id="LI_24">
							 <a href="#" id="A_25"><span id="SPAN_26"></span> Link</a>
						</li>
						<li id="LI_27">
							<input type="text" value="http://www.theprowl.com/item/224132/coffee_mug_shhh_theres_wine" id="INPUT_28" />
						</li>
					</ul>
				</div>
			</div>
			<div id="DIV_29">
				<div id="DIV_30">
					<div id="DIV_31">
						 <a href="https://www.etsy.com/listing/163429740/coffee-mug-shhh-theres-wine-in-here?ref=shop_home_feat_2" id="A_32"><img...

CSS

#DIV_105 {
    background-position: 50% 50%;
    height: 221px;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 1436px;
    z-index: 10;
    perspective-origin: 718px 110.5px;
    transform-origin: 718px 110.5px;
    background: rgba(0, 0, 0, 0.701961) none no-repeat scroll 50% 50% / auto padding-box border-box;
    font: normal normal 300 15px/normal Nunito, arial;
    overflow: auto;
}/*#DIV_105*/

#DIV_106 {
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 10px 0px;
    height: 972px;
    position: relative;
    width: 960px;
    perspective-origin: 480px 486px;
    transform-origin: 480px 486px;
    font: normal normal 300 15px/normal Nunito, arial;
    margin: 70px 238px 20px;
    transition: margin 0.2s ease 0s;
}/*#DIV_106*/

#DIV_1 {
    color: rgb(122, 122, 122);
    height: 972px;
    max-width: 955px;
    position: relative;
    text-decoration: none solid rgb(122, 122, 122);
    width: 955px;
    perspective-origin: 477.5px 486px;
    transform-origin: 477.5px 486px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(122, 122, 122);
    font: normal normal 300 15px/normal Nunito, arial;
    margin: 0px 2.5px;
    outline: rgb(122, 122, 122) none 0px;
}/*#DIV_1*/

#A_2 {
    background-position: -700px 0px;
    color: rgb(130, 195, 201);
    display: none;
    height: 16px;
    position: absolute;
    right: 20px;
    text-decoration: none solid rgb(130, 195, 201);
    top: 24px;
    width: 16px;
    z-index: 10;
    perspective-origin: 50% 50%;
    transform-origin: 50% 50%;
    background: rgba(0, 0, 0, 0) url(http://www.theprowl.com/2183/images/sprite_png_large.png?2) no-repeat scroll -700px 0px / 1000px 800px padding-box border-box;
    border: 0px none rgb(130, 195, 201);
    font: normal normal 300 15px/normal Nunito, arial;
    outline: rgb(130, 195, 201) none 0px;
}/*#A_2*/

#DIV_3 {
    color: rgb(122, 122, 122);
    height: 37px;
    position: relative;
   ...