JSFiddle - React, Tailwind, and code Playground

HTML

<p>One-Two</p>
<p>Three-Four</p>
<p>Five-Six</p>












    <!-- EPAM LOGO © EPAM Systems Inc. jQuery course -->
<div id="epam-logo-button">
    <span id="epam-left-bracket">&lt;</span>
    <span id="epam-name-text">epam</span>
    <span id="epam-right-bracket">&gt;</span>
</div>

CSS

.active {
    border: 3px solid red;
}












/* EPAM LOGO © EPAM Systems Inc. jQuery course */
#epam-left-bracket,
#epam-name-text,
#epam-right-bracket {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;    
    width: initial !important;    
    height: initial !important;
    line-height: 18px !important;
    font-family: sans-serif !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: rgb(58, 186, 205) !important;
    background: transparent !important;
}

#epam-name-text {
    color: rgb(255,255,255) !important;
}

#epam-logo-button {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 72px !important;
    height: initial !important;
    line-height: initial !important;
    text-align: center !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: rgb(70, 69, 71) !important;
    box-shadow: 0 0 5px 4px rgb(70, 69, 71) !important;
}

#epam-logo-button:hover {
    cursor: pointer !important;
}

JavaScript

//$('p:eq(1)').addClass('active');

//alert($('p:eq(1)').hasClass('active'));

//$( "p:odd" ).removeClass( "active" );

//$( "p" ).toggleClass( "active" );