JSFiddle - React, Tailwind, and code Playground

by hmpeda

HTML

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

<script src="https://js.hotelreservation.expert/hm.js"></script>
<script>
  var bookingLink = Hotelsoftware.Booking.getLink({ hotelId: 'b08884c4a7', 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;
}


.booking-button {
     display: inline-block;
     padding: 0.5em 1.2em;     
     margin: 0 0.3em 0.3em 0;
     box-sizing: border-box;
     text-decoration: none;     
     font-weight: 300;     
     text-align: center;
     transition: all 0.35s ease;
     border: none;
     color: #FFFFFF;
     background-color: #c62334;
} 

 a.booking-button:hover{
     background-color: #888888;
     color: #fff;
}