JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<body onload="hideDiv()">
            <div class="main">

            <!--main box -->
            <div class="mainContentBox">

            <!-- P O E M -->
            <div id="Poem" align="center">    
                     <div rel="scrollcontent1">
                     Content text here
                    </div>
                <div id="Close" onclick="closeDiv('Poem')"></div>
            </div>

              <div id="spacer">&nbsp;</div><img src="PNG/MyLogo.png"/>
              &nbsp;&nbsp;
              <img src="PNG/LogoSubText.png"/>
              </div>

            <div id="HouseLogo">    
              <div id="mission" style="">
              additional content here
              <br/><br/>
              <table align="center"> 
               <tr>
                <td style="font-size:13px;font-weight:bold;color:#FFFF00;">
                  <div id="showMissionStatement" style="cursor:pointer">... Click here to Learn More About Us!... </div>
               </td>
               </tr>
              </table>
            </div><!--HouseLogo-->


            <div id="window1" onmouseover="largeWindow('window1')" onmouseout="this.style.background='';">
             </div> 

    <div id="door" onmouseover="largeDoor()" onmouseout="this.style.background='';">click the door

        </div>
        </div>

        </body>

CSS

.main {
                  width:100%;
            }

            .mainContentBox {
                  width:900px;
                  height:55px;
                  /*margin:auto;*/
                  margin-top:15px;
    position: relative;
            }

            #Poem {
                  width:285px;
                  height:350px;
                  background:#ffffcc;
                  border:1px solid #cccccc;
                  position:absolute;
                  z-index:5;
                  top:435px;
                  left:312px;
            }

            #Close {
                  position:absolute;
                  top:0px;
                  right:15px;
                  color:blue;
                  cursor:pointer;                  
                  width:36px;
                  height:36px;
    background: red;
        }   

        #HouseLogo {
        width:900px;
        height:721px;
        margin:auto;
        position:relative;
        margin-top:0px;
        background: #cccccc;
        }

        #spacer {
        width:20px;
        float:left;
        }

        #mission {
        width:300px;
        height:80px;
        font-size:13px;
        font-weight:bold;
        color:#ffffff;
        bottom:390px;
        right:485px;
        position:absolute;
        }

        #window1 {
        width:37px;
        height:42px;
        bottom:388px;
        right:433px;
        position:absolute;
        cursor:pointer;
        }

    #door {
       width:37px;
       height:60px;
       bottom:336px;
       right:420px;
       position:absolute;
       cursor:pointer;
       border:1px solid black;
    }

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
                <script>
            $('#door').click(function() {  
            $("#Poem").slideDown(3000);
            });
            </script>
                
                <script language="javascript">
                    function hideDiv() {
        document.getElementById('Poem').style.display = 'none';
    }

    function closeDiv(divId) {
        document.getElementById(divId).style.display = 'none';    
    }
        </script>