JSFiddle - React, Tailwind, and code Playground

HTML

<title>módulo EAD</title>

<body>
<div class="container">

<header>
    <div class="page-header">
    <h1>Bem vindo ao módulo EAD</h1>
    <hr>
    </div>
</header>


<div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">link 1</a>
    <a href="#">link 2</a>
</div>


</div>
</body>

CSS

<style type="text/css">
.vertical-menu {
    width: 200px; /* Set a width if you like */
}

.vertical-menu a {
    background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;
}
</style>