JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="nav-bar-login-or-reg">
        <a href=""><span class="underline-dotted">Войти или зарегистрироваться</span></a>
    </li>	
</ul>

CSS

body {
    background-color: blue;
}
ul {
    list-style-type: none;
}
span.underline-dotted {
    color: white;
    border-bottom: 1px dotted white;
}
.nav-bar-login-or-reg a:before {
    content: "\f084";
	font-family: 'FontAwesome';
	padding-right: 4px;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
	border-bottom: none;
    color: white;
}
a {
    text-decoration: none;
}



@font-face {
  font-family: 'FontAwesome';
  src: url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('http://fortawesome.github.io/Font-Awesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}