JSFiddle - React, Tailwind, and code Playground

by centerwow

HTML

<div  class="foo">a</div>
<div class="foo">b</div>
<div class="foo">c</div>
<div id="foo" class="foo">d</div>
<div id ="wrap_all">e
<div class="foo">r</div>
<div class="foo">f</div>
<div class="foo">g</div>
</div>
    <div class="foo">h</div>
<span></span>

CSS

div ,span{ width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid; 
        padding:2px; }

#wrap_all{bacround-color: #bac;}

JavaScript

var modWidth = 150;

$('#wrap_all').hover(function() {
    $('#wrap_all').wrap("<div style='background:yellow;border:6px green solid;  '/>");
   

}, function() {
        $(this).css("background", "");
        
    });