JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<strong id="myb-remind">See the bidding rules for further information.</strong>

<div id="myb-remind-info">
    <div class="myb-remind-close"></div>
    <p>To place a bid, a future dated Brooklands Hotel room reservation number is required. </p>
    <p>Only bids placed before 3pm the day before arrival are valid.</p>
    <p>The form must be completed with all requested information.</p>
    <p>The placed bid must be equal to or more than the stated minimum bidding amount shown.</p>
    <p>The minimum bid is the lowest bid the Brooklands Hotel will accept.</p>
    <p>The maximum bid shown is the full upgrade price.</p>
    <p>The pre-booked room type and upgraded room type requested must be selected.</p>
    <p>The minimum and maximum bids shown vary depending on your pre-booked room selection and the selected room type to bid on.</p>
    <p>By submitting a bid a contractual commitment is made to purchase the selected upgrade at the price bid, to the Brooklands Hotel, should this be a winning bid.</p>
    <p>The placed bid will be sent directly to the Make Your Day team.</p>
    <p>At 3pm the day prior to the pre-booked reservation arrival date, all bids for this arrival day will be collated.</p>
    <p>The highest submitted bid for the arrival day will win the upgraded room.</p>
    <p>All bidders will be notified on arrival if their bid is the winning bid.</p>
    <p>Bids are supplements and will be charged in addition to the pre-book room reservation room rate, for example:<br />
        If you booked a Deluxe room at a rate of £139 and place a bid of £24 to upgrade to an Executive Room and this is a winning bid (notified upon check-in), the £35 upgrade fee will be added to your pre-booked room rate of £139. Therefore you total room rate bill will be £174.</p>
    <p>All rooms and upgrades are subject to availability.</p>

</div>

CSS

#myb-remind-info {
    display:none;
    border:10px solid #106470;
    padding:10px 10px 0 10px;
    background:#ddd;
    width:500px;
    z-index:10000;
    margin:0 auto;
}

#myb-remind-info p {
    margin-top:0;
}

.myb-remind-close {
  background: url('http://dev.brooklandshotelsurrey.com/sites/all/themes/brooklandshotel/images/closeaqua.jpg') left top;
    width:36px;
    height:34px;
    float:right;
    cursor: pointer;
}

.myb-remind-close:hover {
    background-position: left bottom;
}

.showmyb {  
    display:block !important;
}

JavaScript

$(document).ready(function(){
    
    var clicked = 0;
    $('#myb-remind').click(function(){
        
        if(clicked==0) {
            $('#myb-remind-info').slideDown(1200, function(){
                $('#myb-remind-info').addClass('showmyb');
            });
            clicked = 1;
            return;
        } else {
            $('#myb-remind-info').slideUp(1200, function(){
                $('#myb-remind-info').removeClass('showmyb');
            });
            clicked = 0;     
            return;
        }
    });
      
    
    $('.myb-remind-close').click(function(){
        $('#myb-remind-info').slideUp(1200, function(){
            $('#myb-remind-info').removeClass('showmyb');
            clicked = 0;     
            return;
        });
    });
});