JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div id="main">
    <div id="spotlight-div">
        <div id="spotlight-header">
            <button id="button1">Hi there</button>
            <button id="button2">Another</button>
            <button id="button3">And three</button>
            <p id="offer1" class="active">Lorem ipsum dolor sit amet, ut vix nulla abhorreant, est graeci nostrum ut. </p>
            
            <p id="offer2">Lorem ipsum dolor sit amet, ut vix nulla abhorreant, est graeci nostrum ut. Ei pro scripserit consectetuer, meis errem mea in. Ei malis reformidans adversarium vis. Lorem ipsum dolor sit amet, ut vix nulla abhorreant, est graeci nostrum ut. Ei pro scripserit consectetuer, meis errem mea in. Ei malis reformidans adversarium vis. Est at scripta suavitate dignissim. An apeirian electram duo, consul inermis detracto usu te. In sanctus menandri efficiendi quo.</p>
            
            <p id="offer3">Lorem ipsum dolor sit amet, ut vix nulla abhorreant, est graeci nostrum ut. Ei pro scripserit consectetuer, meis errem mea in. Ei malis reformidans adversarium vis. Est at scripta suavitate dignissim. An apeirian electram duo, consul inermis detracto usu te. In sanctus menandri efficiendi quo.</p>
        </div>
    </div>
    <div id="spotlight-box">
        <p><a href="#" id="spotlight-link">Spotlight</a></p>
    </div>
</div>

CSS

#spotlight-box{
    width:100px;
    background:yellow;
    position:absolute;
    bottom:0;
    left:100px;
    text-align:center;
}
#spotlight-div p{
    padding:10px;
    color:white;
    display:none;
}

#spotlight-div p.active{
    display:block;
}
}
#spotlight-link{
    display:block;
}

#spotlight-header{
    height:25px;
    background:green;
}
#main{
    background:#DDD;
    width:300px;
    height:400px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    
}
#spotlight-div{
    width:250px;
    position:absolute;
    left:25px;
    bottom:-350px;
    background-color:blue;
    height:350px;
}

JavaScript

$("#spotlight-link").on("click", function(e){
    e.preventDefault();
    if($(this).html()=="Spotlight")
    {
        $("#spotlight-div").animate({
            bottom:0
        },1000);    
        $(this).html("Close");
    } else {
        $("#spotlight-div").animate({
            bottom:-350
        },1000);    
        $(this).html("Spotlight");
    }        
});

$("button").on("click",function(e){
    e.preventDefault();
    var id = $(this).attr('id').substring(6);
    $('p').removeClass('active');
    $("#offer"+id).addClass('active');
               
});