JSFiddle - React, Tailwind, and code Playground

by Daniel Flores

HTML

<form>
    <div class="first">
        <lable>First</lable>
        <input id="df-first" type="text" placeholder="First" />
    </div>
    <div class="second">
        <lable>Second</lable>
        <input type="text" placeholder="Second" />
    </div>
    <div class="third">
        <lable>Third</lable>
        <input type="text" placeholder="Third" />
    </div>
    <div class="fourth">
        <lable>Fourth</lable>
        <input type="text" placeholder="Fourth" />
    </div>
</form>
<button type="button" class="df-start-tour">Help</button>

<div class="overlaying">
    <button type="button" class="exit">&times;</button>
</div>
<div id='tip_1' class="df-tooltip">
    <button type="button" class="df-action-close">close</button>
</div>

CSS

/* Spotlight and Overlay */
.overlaying.overlay .exit {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 10px;
    font-size: 32px;
    font-weight: bold;
}
.overlaying.overlay {
    display: block;
    background-color: black;
    bottom: 0;
    left: 0;
    opacity: 0.3;/*Takes value between 0 and 1*/
    position: absolute;
    right: 0;
    top: 0;
}
.overlaying {
    display: none;
}
.spotlight {
    background-color: #FFFFFF;
    position: relative;
    z-index: 50;
}
/* Tool Tip */
.df-tooltip {
    display: none;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 100;
}
.df-tooltip .df-action-close {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* DEMO PURPOSES */
* {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.first,
.second,
.third,
.fourth {
    padding: 10px 5px;
}
form lable {
    display: block;
    width: 250px;
    margin-bottom: 5px;
}
input {
    padding: 5px;
}

JavaScript

//This function removes overlay to free the UI
function spotlightoff() {
 $('.overlaying').animate({
        opacity: 0
    }, 300, function () {
        $('.overlaying').removeClass('overlay');
    });
}

//This function adds an overlay on the UI and add a
//white background to the html element id passed as an argument in the func
function spotlighton(element) {
    $(element).addClass('spotlight');
    $(element).css(" background-color", "white");
    $('.overlaying').css("opacity", "0.3");
    $('.overlaying').addClass('overlay');
}

$('.overlaying .exit').on('click', function(){
    $('.df-tooltip').hide();
    spotlightoff();
});

$('.df-tooltip .df-action-close').on('click', function(){
    $(this).parents().find('.df-tooltip').hide();
    spotlightoff();
});

$('.df-start-tour').on('click', function(){
    spotlighton('.first');
    var offset = $('#df-first').offset();
    $('#tip_1').show().offset(offset);
});