JSFiddle - React, Tailwind, and code Playground

by joanva

HTML

<div class="menu">
	<div class="menu-title">Menu:</div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry</span></a></div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A very very very very long menu entry that is should be on two lines</span></a></div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A quite long menu entry</span></a></div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry that is a bit longer</span></a></div>
</div>

<div class="menu">
	<div class="menu-title">Menu:</div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A two items menu entry</span></a></div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">I should have put some lerem ispum at a moment right?</span></a></div>
</div>

<div class="menu">
	<div class="menu-title">Menu:</div>
	<div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry, but yeah you got it</span></a></div>
</div>

CSS

.menu {
	display: flex;
	align-items: center;
	justify-content: center;
	/* flex-wrap: wrap; → I want this only when the children reach their min-width, to avoid horizontal scrolling */
}

	.menu-title {
		flex-shrink: 0;
	}
	
	.menu-item {
		flex: 0 1 auto;
		min-width: 10rem;
	}
	
	.menu-link {
		padding: 0 1rem;
	}


/* Demo purpose */

html, body {
	margin: 0;
	padding: 0;
}

.menu {
	margin: 2rem;
}

	.menu-title {
		margin-right: 1rem;
	}
	
	.menu-item {
		
	}
	
	.menu-link {
		display: flex;
		position: relative;
		text-decoration: none;
		align-items: center;
	}
	
	.menu-icon {
		display: block;
		width: 2em;
		height: 2em;
		flex-shrink: 0;
		margin-right: 0.5em;
		background-color: #eee;
	}
	
	.menu-text {
		
	}