JSFiddle - React, Tailwind, and code Playground

by stefanpetrovic

HTML

<div class="footer-socials">
  <ul>
    <li>
      <a target="_blank" href="https://plus.google.com/+NOWsupport/posts">
        <span class="sr-only">Google Plus</span>
        <i class="ico-google"></i>
      </a>
    </li>
    
    <li>
      <a target="_blank" href="https://www.linkedin.com/company/nowsupport">
        <span class="sr-only">LinkedIn</span>
        <i class="ico-linkedin"></i>
      </a>
    </li>

    <li>
      <a target="_blank" href="https://twitter.com/NOWsupport">
        <span class="sr-only">Twitter</span>
        <i class="ico-twitter"></i>
      </a>
    </li>

    <li>
      <a target="_blank" href="https://www.youtube.com/user/servicenowdemo">
        <span class="sr-only">YouTube</span>
        <i class="ico-youtube"></i>
      </a>
    </li>
  </ul>
</div>

CSS

.footer-socials li {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

.sr-only {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}





.ico-google {
	background-image: url(https://servicenow.suiteshare.net/static/custom/images/sprite.png?etag=EqrEW4lF);
	background-position: -198px -134px;
	width: 38px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0
}
.ico-linkedin {
	background-image: url(https://servicenow.suiteshare.net/static/custom/images/sprite.png?etag=EqrEW4lF);
	background-position: -150px -68px;
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0
}
.ico-twitter {
	background-image: url(https://servicenow.suiteshare.net/static/custom/images/sprite.png?etag=EqrEW4lF);
	background-position: -116px -68px;
	width: 30px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0
}
.ico-youtube {
	background-image: url(https://servicenow.suiteshare.net/static/custom/images/sprite.png?etag=EqrEW4lF);
	background-position: -198px -162px;
	width: 34px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0
}

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi)
	  {
	    
      .footer-socials {
        background: white;
        }

      .ico-google {
        background-image: url(https://servicenow.suiteshare.net/static/custom/images/[email protected]?etag=qV9vmWyM);
        background-position: -61px -132px;
        background-size: 221px 195px;
        width: 38px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
        font-size: 0
      }
      .ico-linkedin {
        background-image:...