<.dropdown>
  <div tabindex="0" class="btn m-1">open or close</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown end>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown top>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown end top>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown bottom>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown bottom end>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown left>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown end left>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown right>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown end right>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown hover>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown open>
  <div tabindex="0" class="btn m-1">Click</div>
  <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</.dropdown>

<.dropdown>
  <div tabindex="0" role="button" class="btn m-1">Click</div>
  <div
    tabindex="0"
    class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow">
    <div class="card-body">
      <h3 class="card-title">Card title!</h3>
      <p>you can use any element as a dropdown.</p>
    </div>
  </div>
</.dropdown>