JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="icon"></div>

CSS

@font-face {
  font-family:'Octicons Regular';
  src:url("https://a248.e.akamai.net/assets.github.com/assets/octicons/octicons-regular-webfont-3a4a07ddf43d48953bbbd3b14c5d52fcdd3affff.eot");
  src:url("https://a248.e.akamai.net/assets.github.com/assets/octicons/octicons-regular-webfont-3a4a07ddf43d48953bbbd3b14c5d52fcdd3affff.eot#iefix") format("embedded-opentype"), url("https://a248.e.akamai.net/assets.github.com/assets/octicons/octicons-regular-webfont-a6f31b8b33f1ee6b448870815f8ed8da6bc76335.woff") format("woff"), url("https://a248.e.akamai.net/assets.github.com/assets/octicons/octicons-regular-webfont-00374a566ec1aa0cd4ce7c299a15eae94d39b383.ttf") format("truetype"), url("https://a248.e.akamai.net/assets.github.com/assets/octicons/octicons-regular-webfont-45201204b0fcb494ea3da6423be771b7a1d89515.svg#newFontRegular") format("svg");
  font-weight:normal;
  font-style:normal
}

body{
  background:#eee;
}

.icon{
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  text-decoration: none;
  font-size:200px;
  margin-top:30px;
  text-shadow:0 1px 0 #fff;
  color:#000;
  background: -webkit-linear-gradient(top, #878787, #000);
	background: linear-gradient(top, #878787, #000);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.icon:before{
  content:"\f209";
}