JSFiddle - React, Tailwind, and code Playground

HTML

<div class="email">[email protected]</span>

CSS

@font-face {
  font-family: 'Calibri';
  src: url('http://lionbit.by/fonts/calibri.eot');
  src: url('http://lionbit.by/fonts/calibri.eot?#iefix') format('embedded-opentype'), url('http://lionbit.by/fonts/calibri.woff') format('woff'), url('http://lionbit.by/fonts/calibri.ttf') format('truetype'), url('http://lionbit.by/fonts/calibri.svg#calibri') format('svg');
}
@font-face {
  font-family: 'Calibri Light';
  src: url('http://lionbit.by/fonts/calibri-light.ttf');
  src: url('http://lionbit.by/fonts/calibri-light.eot?#iefix') format('embedded-opentype'), 
        url('http://lionbit.by/fonts/calibri-light.woff') format('woff'), 
        url('http://lionbit.by/fonts/calibri-light.ttf') format('truetype'),
        url('http://lionbit.by/fonts/calibri-light.svg#calibri-light') format('svg');
}
.email{
    color: #222;
  font-family: "Calibri Light";
  font-variant: small-caps;
  letter-spacing: -0.05em;
  text-decoration: none;
}