JSFiddle - React, Tailwind, and code Playground

by Lahusa

HTML

<html><head>
		<link rel="icon" href="favicon.png">
		<title>HLTV Dashboard</title>
		<link rel="stylesheet" href="css/dashboard.css">
	</head>
	<body>
		<header>
			<div id="left-header">
				<img id="hltv-logo" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
				<form method="post" class="dropdown">
					<button class="dropdown-button">Servers</button>
					<div class="dropdown-content">
						<input type="submit" class="servers" name="26700" value="Hardwaretalk"><br><input type="submit" class="servers" name="40218" value="1 Jahr Explosion"><br><input type="submit" class="servers" name="45396" value="the good side of EA"><br><input type="submit" class="servers" name="74863" value="Zsunamy"><br>					</div>
				</form>
			</div>
			<div id="right-header">
				<img id="useravatar" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
				<div id="username">Revilum</div>
			</div>
		</header>
			

</body></html>

CSS

body {
    background-color: #2C2F33;
    color: #99AAB5;
    margin: 0px;
    font-size: 15px;
}
header {
    width: 100%;
    height: 8%;
    background-color: #23272A;
    margin: 0px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed blue;
    box-sizing: border-box;
}
.dropdown {
    display: block;
    border: 2px dotted green;
    box-sizing: border-box;
}
.dropdown-button {
    background-color: #7289DA;
    color: white;
    padding: 10px;
    font-size: 15px;
    border: none;
    border-radius: 3px;
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #677bc4;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content input {
    color: black;
    background-color: #2C2F33;
    color: #99AAB5;
    padding: 12px 16px;
    text-decoration: none;
    border: none;
    width: 100%;
}
.dropdown-content input:hover {
    background-color: #23272A;
    color: #FFFFFF;
}
.servers {

}
.dropdown:hover .dropdown-content {
    display: block;
}
.rounded-icon {
    border-radius: 50%;
    height: 80%;
}
#hltv-logo {
    display: inherit;
}
#useravatar {
    display: inherit;
}
#username {
    display: inherit;
}
#left-header {
    height: 100%;
    display: inline-flex;
    border: 2px dotted red;
    box-sizing: border-box;
    align-items: center;
    min-height: 0;
    min-width: 0;
}
#right-header {
    height: 100%;
    display: inline-flex;
    border: 2px dotted red;
    box-sizing: border-box;
    align-items: center;
    min-height: 0;
    min-width: 0;
}