JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<h1>Meine erste Internetseite</h1>
    <nav>
			<a href="index.html">Home</a>
			<a href="about-me.html">About me</a>
			<a href="contact.html">Contact</a>
		</nav>
</header>
<main>
		<img class="left"...

CSS

* {				font-family: arial, sans-serif;}

body { background-color:#C5E2FC;
			 margin: 0 10px;}

h1,h2 { text-align: center;}

nav   { border: solid red 3px;
				margin: 0 200px;
				min-height: 3em;
				display: flex; justify-content: center; align-items:center;
}

nav a { padding: 3px 25px; min-width: 8rem;
				color: black; border: 1px solid blue;
				text-decoration: none; text-align:center; font-size: 20px;}

nav a:hover{	color: red; font-size: 25px;}

nav,main { box-shadow: 5px 5px 5px 5px; }

p { margin-right: 0px; margin-left: 0px;
    padding-top: 0px; padding-left: 0px;}

nav, img, main {
   border-radius: 25px;
}
img {
				margin: 0;
				height: 168px;
				width: 300px;
}
img.left {	float: left; margin-right: 5px; }
img.right { float: right; margin-left: 5px; }

main {	padding: 50px;
				background-color: peachpuff;
				margin: 50px 0;
				border: red solid 3px;}