JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quandoo-widget" id="quandoo-booking-widget"></div>
<button class="home-menu-link-reservation">RESERVATION</button>

CSS

.quandoo-widget {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
z-index: 300;
}

.home-menu-link-reservation {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 77%;
z-index: 500;
margin-top: 20px;
padding: 5px 26px;
border-style: solid;
border-width: 1.5px;
border-color: hsla(0, 0%, 100%, .8);
background-color: rgba(8, 24, 21, .4);
font-family: Miller, sans-serif;
color: #fff;
font-size: 15px;
font-weight: 400;
text-align: center;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
}

JavaScript

$('.social-icons').hide();
$('.social-icons').fadeIn(6000);
$('.home-menu-link-reservation').hide();
$('.home-menu-link-reservation').fadeIn(3000);
$('.quandoo-widget').hide();
// Function Button Click
$('.home-menu-link-reservation').on('click', function() {
    // Fade Widget In and Out on Click
    $('.quandoo-widget').fadeToggle( 800, 'swing' );
    // Change Button Text from Reservation to Zurück
    var textToggle = $('.home-menu-link-reservation').text() == "Zurück" ? 'RESERVATION' : 'Zurück';
    
    $('.home-menu-link-reservation').text(textToggle)
});