JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
		integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">



	<div class="list">
		<ul>
			<li><a href="#"><i class="fab fa-facebook-f"></i> Пункт1</a></li>
			<li><a href="#"><i class="fab fa-vk"></i> ПунктПункт2</a></li>
			<li><a href="#"><i class="fab fa-facebook"></i> Пункт3</a></li>
			<li><a href="#"><i class="fab fa-instagram"></i> ПунктПунктПункт4</a></li>
			<li><a href="#"><i class="fab fa-facebook-square"></i> Пункт5</a></li>
		</ul>
	</div>

CSS

ul,li {
    list-style: none;
    margin: 0 20px 0 0;
    padding: 0;
    display: inline-block;
    
}
a{
    text-decoration: none;
    color: inherit;
}

.list{
    width: 400px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
}