JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.js"></script>
<body style="background-color:#ff0000">
<a href="#" onClick="$.prompt(tourStates);">Take Tour</a><br /><br />

<div>
    <ul style="color:#ffffff">
        <li>Item One</li><br />
        <li id="impromptuVerticalNav">Item Two</li><br />
        <li>Item Three</li><br />
        <li>Item Four</li><br />
        <li>Item Five</li><br />
    </ul>
</div>
</body>

CSS

/*
------------------------------
    Impromptu
------------------------------
*/
.jqifade{
    position: absolute; 
    background-color: #000000; 
    height:2315px !important; /*set to page height*/
}

div.jqi{ 
    width: 400px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    position: absolute; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #B8B8B8));
    /*background-color: #f0f0f0; */
    font-size: 11px; 
    text-align: left; 
    border: solid 1px #f0f0f0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 7px;
    /*drop shadow*/
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
}
div.jqi .jqicontainer{ 
    font-weight: bold; 
}
div.jqi .jqiclose{ 
    position: absolute;
    top: 4px; right: -2px; 
    width: 18px; 
    cursor: default; 
    color: #bbbbbb; 
    font-weight: bold; 
}
div.jqi .jqimessage{ 
    padding: 10px; 
    line-height: 20px; 
    color: #444444; 
}
div.jqi .jqibuttons{ 
    text-align: center; 
    padding: 5px 0 5px 0; 
    border: solid 1px #eeeeee; 
    background-color: #e0e0e0;
}
div.jqi button{ 
    padding: 3px 10px; 
    margin: 0 10px; 
    outline: none;
    /*background-color: #b40025; 
    border: solid 1px #D14747; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 12px; */
}
/*div.jqi button:hover{ 
    background-color: #821F20;
}
div.jqi button.jqidefaultbutton{
    background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
    background-color: #BF5E26;
}*/

.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}

.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #FFFFFF; }
.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #FFFFFF; margin-left: -10px; }
.jqi .jqiarrowtr{...

JavaScript

// Impromptu tour
// http://trentrichardson.com/Impromptu/

//  The positioning instructions are provided through an option WITHIN each state. position: { container: '#header', x: 10, y: 45, width: 200, arrow: 'tl' }
//
//  The container is the anchor element selector, and x/y are the distances relative to the anchor element. The arrow options are: tl, tc, tr, rt, tm, tb, br, bc, bl, lb, lm, lt.
var tourSubmitFunc = function(e,v,m,f){
            if(v === -1){
                $.prompt.prevState();
                return false;
            }
            else if(v === 1){
                $.prompt.nextState();
                return false;
            }
},
tourStates = [
    {
        html: 'This is pointing to li with #impromptuVerticalNav. I want this list item to be ABOVE the overlay.',
        buttons: { Done: 2 },
        focus: 1,
        position: { container: '#impromptuVerticalNav', x: 77, y: -62, width: 200, arrow: 'lm' },
        submit: tourSubmitFunc
    }
    
];