JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<div id="DIV_1">
	<div id="DIV_2">
	</div><img id="IMG_4" src="//lh6.googleusercontent.com/-pk4DPmRV3do/AAAAAAAAAAI/AAAAAAAAAAA/-03pVhrCmIs/mo/photo.jpg?sz=120" alt="" />
	<p id="P_5">
		Nicolò Benigni
	</p>
	<form method="post" action="https://accounts.google.com/ServiceLoginAuth" id="FORM_6">
		<input name="GALX" type="hidden" value="4JLi1sPIuuw" id="INPUT_7" />
		<input name="continue" type="hidden" value="https://mail.google.com/mail/" id="INPUT_8" />
		<input name="service" type="hidden" value="mail" id="INPUT_9" />
		<input name="ltmpl" type="hidden" value="default" id="INPUT_10" />
		<input name="scc" type="hidden" value="1" id="INPUT_11" />
		<input name="sacu" type="hidden" value="1" id="INPUT_12" />
		<input name="acui" type="hidden" value="0" id="INPUT_13" />
		<input type="hidden" id="INPUT_14" name="_utf8" value="☃" />
		<input type="hidden" name="bgresponse" id="INPUT_15" value="js_disabled" />
		<input type="hidden" id="INPUT_16" name="pstMsg" value="1" />
		<input type="hidden" id="INPUT_17" name="dnConn" />
		<input type="hidden" id="INPUT_18" name="checkConnection" value="youtube:249:1" />
		<input type="hidden" id="INPUT_19" name="checkedDomains" value="youtube" /> <span id="SPAN_20">[email protected]</span>
		<input id="INPUT_21" name="Email" type="email" placeholder="Email" value="[email protected]" /> 
		<label for="Passwd" id="LABEL_22">
			Password
		</label>
		<input id="INPUT_23" name="Passwd" type="password" placeholder="Password" />
		<input type="hidden" name="PersistentCookie" value="yes" id="INPUT_24" />
		<input id="INPUT_25" name="signIn" type="submit" value="Sign in" />
	</form> <a id="A_26" href="https://accounts.google.com/RecoverAccount?service=mail&amp;continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&amp;Email=fvbenigni%40gmail.com">Need help?</a>
</div>

CSS

#DIV_1 {
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 2px 0px;
    color: rgb(64, 64, 64);
    height: 276px;
    width: 274px;
    perspective-origin: 177px 178px;
    transform-origin: 177px 178px;
    background: rgb(247, 247, 247) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(64, 64, 64);
    border-radius: 2px 2px 2px 2px;
    font: normal normal normal normal 13px / normal Arial, sans-serif;
    margin: 0px 361.5px 20px;
    outline: rgb(64, 64, 64) none 0px;
    padding: 40px;
}/*#DIV_1*/

#DIV_2 {
    color: rgb(64, 64, 64);
    width: 274px;
    perspective-origin: 137px 0px;
    transform-origin: 137px 0px;
    border: 0px none rgb(64, 64, 64);
    font: normal normal normal normal 13px / normal Arial, sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#DIV_2*/

#IFRAME_3 {
    color: rgb(64, 64, 64);
    display: block;
    height: 1px;
    position: absolute;
    top: -100px;
    visibility: hidden;
    width: 1px;
    align-self: stretch;
    perspective-origin: 2.5px 2.5px;
    transform-origin: 2.5px 2.5px;
    border: 2px inset rgb(64, 64, 64);
    font: normal normal normal normal 13px / normal Arial, sans-serif;
    outline: rgb(64, 64, 64) none 0px;
}/*#IFRAME_3*/

#IMG_4 {
    color: rgb(64, 64, 64);
    display: block;
    height: 96px;
    width: 96px;
    perspective-origin: 48px 48px;
    transform-origin: 48px 48px;
    border: 0px none rgb(64, 64, 64);
    border-radius: 50% 50% 50% 50%;
    font: normal normal normal normal 13px / normal Arial, sans-serif;
    margin: 0px 89px 10px;
    outline: rgb(64, 64, 64) none 0px;
}/*#IMG_4*/

#P_5 {
    color: rgb(64, 64, 64);
    height: 18px;
    min-height: 16px;
    text-align: center;
    width: 274px;
    perspective-origin: 137px 9px;
    transform-origin: 137px 9px;
    border: 0px none rgb(64, 64, 64);
    font: normal normal bold normal 16px / normal Arial, sans-serif;
    margin: 10px 0px 0px;
    outline: rgb(64, 64, 64) none...