JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Dropdowns · Bootstrap v5.1</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
      .dropdown-menu {
        position: static;
        display: block;
        width: auto;
        margin: 4rem auto;
      }

      .dropdown-menu-macos {
        display: grid;
        gap: .25rem;
        padding: .5rem;
        border-radius: .5rem;
      }

      .dropdown-menu-macos .dropdown-item {
        border-radius: .25rem;
      }

    </style>
  </head>

  <body>

    <div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
      <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>

    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


  </body>

</html>