JSFiddle - React, Tailwind, and code Playground

by vaxilart

HTML

<div class="box">
    <a style="cursor:pointer;" id="thebutton" name="thebutton">
        <img src="images/button_joindre_icons.png" width="200" height="62" align="right" alt="Nous joindre" />
    </a>

    <table id="joindre">
      <tbody>
        <tr>
          <td class="adress_cell">
            <h4>Ordinashop</h4>

            <p class="adr">
                <br />
                <span class="street-address">102 rue Collin</span><br />
                <span class="region">St-Jean-sur-Richelieu</span><br />
                <span class="postal-code">J3B 6B1</span><br />
            </p>
            <br />

            <p class="tel">
                (514) 638-6734
              </p>
          </td>
        </tr>

        <tr>
          <td class="links" align="center">
              <a href="mailto:[email protected]">
                  <img class="mail_icon" src="images/button_mail_black_small.png" width="50" height="50" alt="Mail" />
              </a>
              <a href="https://www.facebook.com/messages/Ordinadoc.Enr">
                  <img class="fb_icon" src="images/button_fb_black_small.png" width="50" height="50" alt="Facebook" />
              </a>
              <a href="https://twitter.com/#!/Ordinadoc">
                  <img class="twitter_icon" src="images/button_twitter_black_small.png" width="50" height="50" alt="Twitter" />
              </a>
              <a href="https://plus.google.com/116509806419116541299"><img class="gplus_icon" src="images/button_gplus_black_small.png" width="50" height="50" alt="Google+" />
          </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

.box {
    top: 0px;
    right: 0%;
    position: fixed;
    margin: 0;
    padding: 0;
}
.button_joindre{
    background: none;
}
.adress_cell{
    background-color: #ffffff;
    border: 0;
}
.adr{
    color:#000000;
    font-size: 14pt;
    text-align: center;
}
.tel{
    color:#FF8C00;
    font-size: 22pt;
    text-align: center;
}
.links {
    padding-top: 2%;
    padding-bottom: 1%;
    background-color: #ffffff;
    border: 0;
}
.box h4{
    color:#000000;
    font-size: 22pt;
    text-align: center;
}
.box img{
    position: relative;
    top: 0;
    right: 0;
}
#joindre{
    display: none;
}

JavaScript

$('#thebutton').mouseover(function() {
    $('#joindre').show('slow');
});
$('#joindre').mouseout(function() {
    $(this).hide('slow');
});