JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-navigation">
		<div class="menu-main-menu-container">
			<ul class="nav-menu">
				<li><a href="#home">Home</a></li>
				<li><a href="#blog">Blog</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#contact">Contact</a></li>
				<li><a href="#page">Page</a></li>
				<li><a href="#categorys">Categorys</a></li>
				<li><a href="#untitled">Untitled</a></li>
				<li><a href="#post">Post</a></li>
			</ul>
		</div>
	</nav>

CSS

/* Optional: Center the navigation */
	.main-navigation {
		text-align: center;
	}

	.menu-main-menu-container {
		display: inline-block;
	}
	
	/* Float menu items */
	.nav-menu li {
		float:left;
		list-style-type: none;
	}

	/* Pull the 5th menu item to the left a bit so that there isn't to much space between item 4 and ... */
	.nav-menu li:nth-child(4) {
		margin-right: -60px;
	}

	/* Create a pseudo element for ... and force line break afterwards (Hint: Use a symbol font to improve styling) */
	.nav-menu li:nth-child(5):before {
		content: "...\A";
		white-space: pre;
	}

	/* Give the first 4 items some padding and push them in front of the submenu */
	.nav-menu li:nth-child(-n+4) {
		padding-right: 15px;
		position: relative;
		z-index: 1;
	}

	/* Float dropdown-items to the right. Hardcode width of dropdown. */
	.nav-menu li:nth-child(n+5) {
		float:right;
		clear: right;
		width: 150px;
	}

	/* Float Links in dropdown to the right and hide by default */
	.nav-menu li:nth-child(n+5) a{
		display: none;		
		float: right;
		clear: right;
	}	

	/* When hovering the menu, show all menu items from the 5th on */
	.nav-menu:hover li:nth-child(n+5) a,
	.nav-menu:hover li:nth-child(n+5) ~ li a{
		display: inherit;
	}

	/* When hovering one of the first 4 items, hide all items after it so we do not activate the dropdown on the first 4 items */
	.nav-menu li:nth-child(-n+4):hover ~ li:nth-child(n+5) a{
		display: none;
	}

	/* Styling */
	
	.nav-menu {
		font-family: Arial;		
		padding: 0;
		margin: 0;
	}

	.nav-menu li:nth-child(n+5) {
		text-align: center;
	}

	.nav-menu a {
		color: black;
		text-decoration: none;
		text-transform: uppercase;
	}	

	.nav-menu li:nth-child(n+5) a{
		width: 70%;
		padding: 1px 15%;

		background-color: black;
		
		text-align: left;
		color:white;
	}	

	.nav-menu li:nth-child(5) a {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding-top: 15%
	}

	.nav-menu li:last-child a {
		border-bottom-left-radius:...