JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">




<div class="dropdown-mobile-menu">
  <button class="show" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span>Dropdown 1</span>
  </button>
  <div class="dropdown-list-items">
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">something 1</a></li>
      <li><a class="dropdown-item" href="#">something 2</a></li>
      <li><a class="dropdown-item" href="#">something 3</a></li>
    </ul>
  </div>
  <button class="show" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <span>Dropdown 2</span>
  </button>
  <div class="dropdown-list-items">
    <ul class="dropdown-menu dropdown-theme">
      <li><a class="dropdown-item" href="#">else 1</a></li>
      <li><a class="dropdown-item" href="#">else 2</a></li>
      <li><a class="dropdown-item" href="#">else 3</a></li>
    </ul>
  </div>
</div>