JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
<div class="single-accordion1">
<!-- MENU-Button -->
    <h2 style="cursor: default;">Menü</h2>
         
<!-- MENU-Punkte -->
<!-- MENU-Punkt1 -->
    <label for="rb1">Menüpunkt1</label>
    <br>    
<!-- MENU-Punkt2 -->
    <label for="rb2">Menüpunkt2</label>
    <br>
<!-- MENU-Punkt3 -->
    <label for="rb3">Menüpunkt3</label>
    <br>
<!-- MENU-Punkt4 -->
    <label for="rb4">Menüpunkt4</label>
    <br>
</div>
</div>

CSS

.accordion {
    width: 400px;
    padding: 3px;
    position: relative;
    margin-left:5px;
    margin-top:0px; z-index: 2;}
.single-accordion1 {
    height: 55px;
    width: 95px;
    overflow: hidden;
    background: #0095FF;
    padding: 0px 20px;
    -webkit-transition: all 0.1s; 
    /* Safari */
    transition: all 0.1s;
    }
.single-accordion1:hover {
    height: 610px;            
    width: 295px;            
    border-radius: 30px;                
    background: #CCCCCC;                
    -webkit-transition: all 0.1s;
    /* Safari */                
    transition: all 0.1s;
    }