JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<ul id="UL_1">
	<li id="LI_2">
		<a href="http://www.smashingmagazine.com/feed/" title="Subscribe to our RSS-feed (120K)" id="A_3">RSS</a>
	</li>
	<li id="LI_4">
		<a href="http://www.facebook.com/smashmag" title="Join our Facebook page! (206k)" id="A_5">Facebook</a>
	</li>
	<li id="LI_6">
		<a href="http://twitter.com/smashingmag" title="Follow us on Twitter! (785k)" id="A_7">Twitter</a>
	</li>
	<li id="LI_8">
		<a href="http://www.smashingmagazine.com/the-smashing-newsletter/" title="Subscribe to our Email Newsletter (180k)" id="A_9">Newsletter</a>
	</li>
</ul>

CSS

#UL_1 {
    background-position: 0px 0px;
    color: rgb(51, 51, 51);
    position: relative;
    width: 145.890625px;
    z-index: 50;
    perspective-origin: 72.9375px 0px;
    transform-origin: 72.9375px 0px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 16px/23.3600006103516px 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
    list-style: none outside none;
    margin: 20px 0px 0px 14px;
    outline: rgb(51, 51, 51) none 0px;
    padding: 0px;
}/*#UL_1*/

#LI_2, #LI_4, #LI_6, #LI_8 {
    background-position: 0px 0px;
    color: rgb(51, 51, 51);
    float: left;
    height: 23px;
    position: relative;
    width: 23px;
    perspective-origin: 11.5px 11.5px;
    transform-origin: 11.5px 11.5px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 16px/23.3600006103516px 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 8px 0px 0px;
    outline: rgb(51, 51, 51) none 0px;
}/*#LI_2, #LI_4, #LI_6, #LI_8*/

#A_3 {
    background-position: 76% 35.5%;
    color: rgb(65, 183, 216);
    display: block;
    height: 23px;
    opacity: 0.449999988079071;
    text-align: left;
    text-decoration: none;
    text-indent: 100%;
    white-space: nowrap;
    width: 23px;
    z-index: 0;
    perspective-origin: 11.5px 11.5px;
    transform-origin: 11.5px 11.5px;
    background: rgba(0, 0, 0, 0) url(http://www.smashingmagazine.com/wp-content/themes/smashing-magazine/images/channels.svg) 76% 35.5% / 353% padding-box border-box;
    border: 0px none rgb(65, 183, 216);
    font: normal normal normal 16px/23.3600006103516px 'Proxima Nova Regular', 'Segoe UI', Roboto, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
   ...