JSFiddle - React, Tailwind, and code Playground

by Scripit

HTML

<body style="background-color: grey;">


			<div class="header">
					<a href="">Home</a>
					<a href="">Allgemein</a>
					<a href="">Essen</a>
					<a href="">Sprache</a>
					<a href="">Rom</a>
			</div>
			<input type="checkbox" id="responsive-nav">
			<label for="responsive-nav" class="responsive-nav-label"><span>&#9776;</span>Menü</label>
			<div class="header1">


					<p><a href="">Home</a></p>
					<p><a href="">Allgemein</a></p>
					<p><a href="">Essen</a></p>
					<p><a href="">Sprache</a></p>
					<p><a href="">Rom</a></p>

			</div>
			<div id="slider">
				<figure>
					<img src="https://de.best-wallpaper.net/wallpaper/1920x1080/1509/Italy-street-house-flowers-road_1920x1080.jpg" alt>
					<img src="https://de.best-wallpaper.net/wallpaper/1920x1080/1410/Manarola-Italy-night-houses-cliff-coast_1920x1080.jpg" alt>
					<img src="https://de.best-wallpaper.net/wallpaper/1920x1080/1506/Venice-Italy-houses-city-river-evening-boats-dusk_1920x1080.jpg" alt>
					<img src="https://de.best-wallpaper.net/wallpaper/1920x1080/1610/Roman-Empire-city-night-buildings-houses-lights-Florence-Italy_1920x1080.jpg" alt>
					<img src="https://de.best-wallpaper.net/wallpaper/1920x1080/1509/Italy-street-house-flowers-road_1920x1080.jpg" alt>
				</figure>
			</div>

	</body>

CSS

<style type="text/css">
		html{font-family: 'Roboto', serif;}
		ul{list-style: none;}
		a{color: black; font-size: 30px; text-decoration: none; padding-left: 5%; padding-right: 5%; color: white; background-color: grey; padding-bottom: 25px; padding-top: 25px; margin-top: 25px;}
		div.header{ background-color: grey; text-align: center;  padding-top: 25px; display: block; padding-bottom: 25px;}
		div.header1{display: none; text-align: center; color: grey; }
		a:hover{background-color: green;}
		input[type=checkbox]{
			display: none;
		}
		label{display: none;}
		@media screen and (max-width: 900px){

			div.header{display: none;}
			label.responsive-nav-label {
    		position: relative;
			  display: block;
			  padding: 20px;
			  background: #222;
			  cursor: pointer;
			  color: #fff;
				display: block;
			}

			label.responsive-nav-label span {
			  margin-right: 10px;
			}
			input#responsive-nav[type=checkbox]:checked ~ header1 {
			  display: block;
			}

			p{margin-bottom: 30px; z-index:45454564564566574564567581456473551587143575416545345624356754623785465956785796;}

		}
		@keyframes slidy {
			0% { left: 0%; }
			20% { left: 0%; }
			25% { left: -100%; }
			45% { left: -100%; }
			50% { left: -200%; }
			70% { left: -200%; }
			75% { left: -300%; }
			95% { left: -300%; }
			100% { left: -400%; }
			}

			body { margin: 0; }
			div#slider { overflow: hidden; }
			div#slider figure img { width: 20%; float: left; }
			div#slider figure {
			  position: relative;
			  width: 500%;
			  margin: 0;
			  left: 0;
			  text-align: left;
			  font-size: 0;
			  animation: 25s slidy infinite;
		}


		</style>