JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item inactive" type="button">Disabled action</button></li>
    <li>
      <div class="dropdown-item inactive">
        <div class="dropdown-item-header">
          Some Disabled complex item
        </div>
        <div class="dropdown-item-content">
          Some contrent
        </div>
      </div>
    </li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

CSS

.dropdown-item-header {
  font-weight: bold;
}

.dropdown-item-content {
  margin: 20px;
}

.dropdown-item.inactive {
  cursor: default;
}

JavaScript

$(".dropdown").on("hide.bs.dropdown", function(e) {

  if (e && e.clickEvent && e.clickEvent.target) {
    let target = $(e.clickEvent.target);
    if (!target.hasClass("dropdown-item")) {
      target = target.parents(".dropdown-item");
    }

    if (target.length > 0 && target.hasClass("inactive")) {
      return false;
    }
  }

  return true;
});