JSFiddle - React, Tailwind, and code Playground

by Malte_M

HTML

<html>
	<head>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
        
	<div class="navigation">
        <div class="table-scale">
        <table class="nav">
            <tr>
                <td class="nav">
                    <div class="Home">                
                        <a href="index.html" class="normalHaus"> <img src="Bilder/Haus.png" alt="Home" class="normalHaus" width="30pt"></a>
                    </div>
                </td>
                <td class="nav">
                    <div class="navbarlinks"><a href="Client.html" class="normalLink">Client</a></div>
                </td>
                <td class="nav">
                    <div class="navbarlinks"><a href="Server.html" class="normalLink">Server</a></div>
                </td>
                <td class="nav">
                    <div class="navbarlinks"><a href="Switch.html" class="normalLink">Switch</a></div>
                </td>
                <td class="nav">
                    <ul>
                    <li class="dropdown">
                        <div class="backgr-dropdwn">
                            <a href="Modem_Router.html" class="dropbtn">Modem & Router</a>
                        </div>
                        <ul class="dropdown-inhalt">
                            <li><div class="droplinksfirst"><a href="Modem_Router.html">EinfĂĽhrung</a></div></li>
                            <li><div class="droplinks"><a href="Modem_Router.html">Link 1</a></div></li>
                            <li><div class="droplinkslast"><a href="Modem_Router.html">Link 2</a></div></li>
                        </ul>
                    </li>
                    </ul>
                </td>
                <td class="nav">
                    <div class="navbarlinks"><a href="impressum.html" class="normalLink">Impressum</a></div>
               ...

CSS

/*general start*/
html{
    scroll-behavior: smooth;
}
body{
	background-color: #f7f7f7;
    font-family: sans-serif;
    font-weight: 100;
    margin: 0px;
}
/*general end*/


/*navigation start*/
div.navigation {
    display: block;
    font-family: sans-serif;
    font-size: 16px;
    background-color:#99c9ff;
    width: 500%;
	height: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 1;
    position: relative;
    top: 0px;
	border-bottom: 1px solid lightgrey;
}

    /*dropdown start*/
    .dropdown{
        position: relative;
        min-width: 121px;
}
    .dropdown-inhalt{
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        -webkit-transform: translateY(-2em);
        -ms-transform: translateY(-2em);
        transform: translateY(-2em);
        z-index: -1;
        -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
        -o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
        transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
        background: transparent;
        width: auto;
    }
    .dropdown:focus .dropdown-inhalt,
    .dropdown:focus-within .dropdown-inhalt,
    .dropdown:hover .dropdown-inhalt{
        visibility: visible;
        opacity: 1;
        z-index: 1;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        -webkit-transition-delay: 0s, 0s, 0.3s;
        -o-transition-delay: 0s, 0s, 0.3s;
        transition-delay: 0s, 0s, 0.3s;
    }

    .droplinkslast{
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background: #f7f7f7;
        -webkit-transition: background-color 0.5s ease-out;
        -o-transition: background-color 0.5s ease-out;
        transition: background-color 0.5s ease-out;
       ...