JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body id="body">
      <div id="welcome">
          <img src="imgs/img1.jpg" id="i1" alt=null/>
      </div>

    <div id="About">
        <img src='https://c2.staticflickr.com/8/7153/6852073179_00961ba267.jpg' class='close_button' alt=null
        style="width: 5%; height: 5%"/>
        <p>some stuff that needs a border</p>
    </div>
</body>

CSS

body {
    background-color: rgb(0,0,0);
    width: 100%;
    height: 100%;
}
#About {
    display: none;
    margin-left: 250px;
    margin-right: 250px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 20px;

    border-style: solid;
    border-width: 30px;
    border-image: url(http://www.sandranathan.net/wp-content/uploads/2012/02/ROSE-BORDER-11668791_l-72.jpg) 600 500 600 round;
}
#About p,h1 {
    text-align: center;
    color: rgb(255,255,255);
    font-size: 28px;
}

JavaScript

$(document).ready(function(){
    buildMain();
    $("#i1").trigger("click");
   
    function buildMain() {
        $('#i1').click(clickFade);
    }   

    function clickFade() {
        $('#welcome').fadeTo('slow',.1);
        $('#i1').unbind('click',clickFade);
        $('#welcome').css({'position':'relative','z-index':'-10'});
        switch (this.id) {
            case "i1":
                $('#About').fadeIn('slow');
                $('.close_button').click(function() {
                    $('#About').fadeOut('slow');
                    $('#welcome').fadeTo('slow',1);
                    $('#i1').click(clickFade).mouseover(mouseOverFunc);
                    $('#welcome').css({'position':'absolute','z-index':'10'});
                });
                break;
        }
    }
});