JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#"><span class="my_span">Не должно пропадать за фоном при наведении</span> Action</a>
    <a class="dropdown-item" href="#">Справа badge должен быть белым фоном при наведении и синим текстом <span class="badge badge-pill my_badge">10</span></a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

CSS

.my_span {
  color: blue;
}

.my_span:hover {
  color:white;
}

.my_badge {
background-color: blue;
color:white;
}

.dropdown-item:hover {
background-color: blue;
color:white;
}

.dropdown-item:hover *{
color:white;
}

.dropdown-item.active, .dropdown-item:active {
background-color: blue;
}