JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
     <div>
          <div>div 1</div>
          <div>div 2</div>
          <div>
              <div>
                  div 3.1
              </div>
         </div>
     </div>
</a>

<div class="outer">
     <div>
          <div>div 1</div>
          <div>div 2</div>
          <div>
              <div>
                  div 3.1
              </div>
         </div>
     </div>
</div>

CSS

a {
    display: block;
    border: 2px solid #c00;
}

a div {
    margin: 5px;
}

a > div > div {
    border: 2px dashed green;
}

a > div > div div {
    border: 2px dashed blue;
}

div.outer {
    background: beige;
    cursor: pointer;
}

JavaScript

$("div.outer").on("click", function() {
    alert( "click" );
});