JSFiddle - React, Tailwind, and code Playground

by hmpeda

HTML

<script type="application/javascript">
	var hmHotelId = 'd2c884c4cc';
</script>

<div class="container--center ">
  <a class="booking-button" id="bookinglink" href="javascript:void(window.open(Hotelsoftware.Booking.getLink({ hotelId: hmHotelId, env: 'prod' }), '_blank'));" target="_blank" >Online-Buchung</a>
</div>

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
  var bookingLink = Hotelsoftware.Booking.getLink({ hotelId: hmHotelId, env: 'prod' });
  document.querySelector('#bookinglink').href = bookingLink;
</script>

CSS

body {
  font-family: 'Roboto',sans-serif;
}

.container--center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    --border-radius: 0em;
    --button-text-color: #000000;
    --button-color: #FFFFFF;    
    --button-border-color: #000000;
    --button-border-width: 0.2em;
    
    --button-hover-color: #000000;
    --button-hover-border-color: #000000;
    --button-hover-text-color: #fff;
}


.booking-button {
     display: inline-block;
     padding: 0.5em 1.2em;     
     margin: 0 0.3em 0.3em 0;
     border-radius: var(--border-radius);
     box-sizing: border-box;
     text-decoration: none;     
     font-weight: 300;     
     text-align: center;
     transition: all 0.35s ease;
     border: 0.2em solid #000;
     color: #000;
     background-color: #fff;
          
     border: var(--button-border-width) solid var(--button-border-color);
     color: var(--button-text-color);
     background-color: var(--button-color);
} 

 a.booking-button:hover{
     background-color: #000;
     color: #fff;
     
     border: var(--button-border-width) solid var(--button-hover-border-color);
     color: var(--button-hover-text-color);
     background-color: var(--button-hover-color);
}