JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
				<a href="" class="items">
					<img src="img/food.png">
					<span>Soup</span>
				</a>
				<a href="" class="items">
					<span>Home</span>
				</a>
				<a href="" class="items">
					<span>Recipies</span>
				</a>
				<a href="" class="items">
					<span>Blog</span>
				</a>
				<a href="" class="items">
					<span>Gallery</span>
				</a>
				<a href="" class="items">
				</a>
				
			</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Mouse+Memoirs');
.menu
{
	display: -webkit-box;	
	display: -ms-flexbox;	
	display: flex;
	margin-top: 1.7%;	
}
.menu > a 
{
	text-decoration:none;
	border: 1px solid red;
}
.menu > a > span {
	font-family:'Mouse Memoirs', sans-serif;
  font-size:100px/20px;
}