JSFiddle - React, Tailwind, and code Playground

by Daniele Alessandra

HTML

<div id="custom-navbar">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>


</div>

CSS

:root  {
	--navbar-background-color: #ff1a1a;

	--navbar-text-color: var(--header-text-color) !important;
	--navbar-height: 23px;
	--navbar-top: 40px;
	--navbar-font-size:
	
}



#custom-navbar {
	overflow: hidden;
	background-color: var(--navbar-background-color);

	height: var(--navbar-height);
		
	top: var(--navbar-top);
	right: 0;
	left: 0;
	position: fixed;
	overflow-y: hidden;
	z-index: 1;

	padding-right: 50px;
	padding-top: 3px;
	display: inline;
	text-align: right;
	
}


#custom-navbar a  {
	color: var(--navbar-text-color);
	display: inline;
	padding: 10px;
	font-size: var(--navbar-font-size);
	text-decoration: none;
	
	height: 100% !important;
}

#custom-navbar a:hover  {
	background-color: grey;
}