JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<div id="DIV_1">
	 <a href="/tip" id="A_2"><i id="I_3"></i> Send Tip</a> <a href="/kudos/marketplace/" id="A_4"> <i id="I_5"><img src="/static/v2/images/kudos/IconKudos.svg" id="IMG_6" alt='' /></i> Send Kudos</a> <a href="/funding/new" id="A_7"><i id="I_8"></i> Fund Issue</a>
	<div id="DIV_9">
	</div> <a href="/grants/profile" id="A_10"> <i id="I_11"><img src="/static/v2/images/grants/icons/black.svg" id="IMG_12" alt='' /></i> My Grants</a> <a href="/explorer?bounty_filter=createdByMe&amp;network=mainnet&amp;order_by=-web3_created" id="A_13"> <i id="I_14"><img src="/static/v2/images/grants/icons/black.svg" id="IMG_15" alt='' /></i> My Created Bounties</a> <a href="/explorer?bounty_filter=startedByMe&amp;network=mainnet&amp;order_by=-web3_created" id="A_16"> <i id="I_17"><img src="/static/v2/images/grants/icons/black.svg" id="IMG_18" alt='' /></i> My Started Bounties</a>
	<div id="DIV_19">
	</div> <a href="/onboard/profile/?steps=avatar" id="A_20"><i id="I_21"></i> My Avatar</a> <a href="/profile/" id="A_22"><i id="I_23"></i> My Profile</a>
	<div id="DIV_24">
	</div> <a href="/settings/email/d4b2dad533422086ea1ba802cd613" id="A_25"><i id="I_26"></i> Manage Settings</a>
	<div id="DIV_27">
	</div> <a href="http://localhost:8000/tip/receive/v3/QmaW4dpNhdoW1tdyWAXjBiWtBffyJWVHLsk3iav2GZW9Hy/0xb090e173ecde4df8b747a4139fd4142251c18c284a46f194794d085bbf3ded84/rinkeby" id="A_28"><i id="I_29"></i> Claim $69.21 Tip</a>
	<div id="DIV_30">
	</div> <a href="/logout/?next=/" id="A_31"><i id="I_32"></i> Log Out</a>
</div>

CSS

#DIV_1 {
    bottom: -508px;
    box-sizing: border-box;
    color: rgb(33, 37, 41);
    height: 506px;
    left: 219px;
    min-width: 144px;
    overflow-wrap: break-word;
    position: absolute;
    right: 0px;
    text-align: left;
    text-decoration: none solid rgb(33, 37, 41);
    text-size-adjust: 100%;
    top: 37px;
    width: 227.266px;
    z-index: 2147483647;
    column-rule-color: rgb(33, 37, 41);
    perspective-origin: 113.625px 253px;
    transform-origin: 113.625px 253px;
    caret-color: rgb(33, 37, 41);
    background: rgb(250, 250, 250) none repeat scroll 0% 0% / auto padding-box padding-box;
    border: 0px none rgb(33, 37, 41);
    font: normal normal 400 normal 16px / 24px Muli, sans-serif;
    list-style: none outside none;
    margin: 2px 0px 0px;
    outline: rgb(33, 37, 41) none 0px;
}/*#DIV_1*/

#DIV_1:after {
    box-sizing: border-box;
    color: rgb(33, 37, 41);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(33, 37, 41);
    text-size-adjust: 100%;
    column-rule-color: rgb(33, 37, 41);
    caret-color: rgb(33, 37, 41);
    border: 0px none rgb(33, 37, 41);
    font: normal normal 400 normal 16px / 24px Muli, sans-serif;
    list-style: none outside none;
    outline: rgb(33, 37, 41) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    box-sizing: border-box;
    color: rgb(33, 37, 41);
    overflow-wrap: break-word;
    text-align: left;
    text-decoration: none solid rgb(33, 37, 41);
    text-size-adjust: 100%;
    column-rule-color: rgb(33, 37, 41);
    caret-color: rgb(33, 37, 41);
    border: 0px none rgb(33, 37, 41);
    font: normal normal 400 normal 16px / 24px Muli, sans-serif;
    list-style: none outside none;
    outline: rgb(33, 37, 41) none 0px;
}/*#DIV_1:before*/

#A_2, #A_4, #A_7, #A_20, #A_22, #A_25, #A_28, #A_31 {
    box-sizing: border-box;
    clear: both;
    color: rgb(0, 0, 0);
    display: block;
    height: 45px;
    overflow-wrap: break-word;
    text-align: left;
  ...