JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div style="position:relative;top:0px;left:0px;width:100%;height:100%;border:0px; margin-bottom: 10px">
    <div id="spinCastJs">
      <div id="spintitle">
        <ul class="spin_nav">
          <li class="button"><a>Hello<a></li>
          <li class="info"><a>info</a></li>
        </ul>
      </div>
      <div id="spin_container">
        <div id="spin_info">
            <p>The All new Exclusive Football Bet from Bet Victor.</p>
            <p>The aim of the Spincast is to select the <strong>90 Mins result, Over or Under Number of goals and the Anytime Goalscorer</strong>, in a particular match</p>
            <p>Select the match you want to bet on from the match menu. Return to this menu anytime by clicking on the menu button.</p>
            <p><img src="http://172.23.2.102:3000/images/sports/hamburger-info.png"></p>
            <p>Spin the reels for a random outcome or choose your own selections by clicking on the up and down arrows on each reel. Once you have the combination you want simply click "Add to Betslip" and place your bet</p>
        </div>
      </div>
    </div>
  </div>

CSS

ul.spin_nav li { display: list-item; float: left; background: #ddd; border: 1px solid #fff }
ul.spin_nav li.button { width: 49%; }
ul.spin_nav li.info { width: 50%; }
ul.spin_nav li a {display: inline-block; float: right;}
ul.spin_nav li {list-style-type: none}

#spin_container {display: none; position: absolute;}

JavaScript

$("#spinCastJs .info").hover(
     function() {
        $("#spinCastJs").find("#spin_container").slideDown('slow');
     },
     function() {
        $("#spinCastJs").find("#spin_container").css("display","none");
     }
);