JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div class="header">
					<a href="">Home</a>
					<a href="">Allgemein</a>
					<a href="">Essen</a>
					<a href="">Sprache</a>
					<a href="">Rom</a>
			</div>
			<div class="header1">
			
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Allgemein</a></li>
					<li><a href="">Essen</a></li>
					<li><a href="">Sprache</a></li>
					<li><a href="">Rom</a></li>
				</ul>
			</div>

CSS

ul{list-style: none;}
		a{color: black; text-decoration: none; padding-left: 5%; padding-right: 5%; color: white; /*background-color: grey*/; padding-bottom: 15px; padding-top: 15px; margin-top: 15px;}
		div.header{ background-color: grey; text-align: center;  padding-top: 15px; display: block; padding-bottom: 15px;}
		div.header1{display: none; background-color:red;}
		a:hover{background-color: green;}
		@media screen and (max-width: 700px){
		
			div.header{display: none;}
			div.header1{display: block;}
			
		
		}