JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Example of block, inline, none, inline-block</h2>
<p class="info">This is a paragraph. By default it is a <q>block</q> element.Following elements move on a new line.</p>
<p class="info">This is another paragraph. An input element, 
    <input type="text"> is instead an example of an <q>inline</q>element. Buttons are <q>inline</q> elements too.</p>

CSS

p {
    padding: 10px 5px 15px 10px;
    border: 1px solid gray;
}

q {
    font-weight: bold;
}

.touched {
    background-color: yellow;
    border: 4px dashed blue;
}
}

JavaScript

// Javascript solution
/*
var pEls = document.querySelectorAll(".info");

for (var i=0;i<pEls.length; i++){
    var oneP = pEls[i];
    oneP.onmouseover = function(){
        this.setAttribute("class", "touched");
    }
}

for (var i=0;i<pEls.length; i++){
    var oneP = pEls[i];
    oneP.onmouseout = function(){
        this.removeAttribute("class", "touched");
    }
}
*/
/*
// jQuery solution. Uses one method, .hover() with two
// callback function to deal with mouseover and mouseout

$(".info").hover(
    function(){
        $(this).addClass("touched");
    },
    function(){
        $(this).removeClass("touched");
    });
        
*/