コンポーネント一覧
pinion-ui

Theme

Tune

Lang

Dropdown

Alpine.js で開閉する汎用ドロップダウン。trigger を slot で差し替え可能、label prop で簡易ボタン化も可能。position (bottom-end default / bottom-start / top-end / top-start)・size (sm/md/lg)・width (任意の Tailwind w-* class) の 3 props。menu の中身は自由スロット — リンクでもボタンでも何でも入る。

最小: label でボタン化

Profile Settings
Log out 
<x-dropdown label="Menu">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Settings</a>
    <hr class="my-1 border-base-300">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">Menu <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Settings</a>
<hr class="my-1 border-base-300">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</div>
</div>

position — bottom-end / bottom-start / top-end / top-start

Opens down, right-aligned Item 2
Opens down, left-aligned Item 2
Opens up, right-aligned Item 2
Opens up, left-aligned Item 2 
<x-dropdown label="bottom-end" position="bottom-end">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, right-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="bottom-start" position="bottom-start">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, left-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="top-end" position="top-end">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, right-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="top-start" position="top-start">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, left-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">bottom-end <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, right-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">bottom-start <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, left-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">top-end <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 bottom-full mb-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, right-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">top-start <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 bottom-full mb-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, left-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>

size — sm / md / lg

Small item 1 Small item 2
Standard item 1 Standard item 2
Large item 1 Large item 2 
<x-dropdown label="sm" size="sm">
    <a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 1</a>
    <a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 2</a>
</x-dropdown>
<x-dropdown label="md (default)" size="md">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 1</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 2</a>
</x-dropdown>
<x-dropdown label="lg" size="lg">
    <a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 1</a>
    <a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 2</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]">sm <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 1</a>
<a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">md (default) <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 1</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)]">lg <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 1</a>
<a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 2</a>
</div>
</div>

width — w-40 / w-52 (default) / w-72 / w-96

Narrow
Standard
Wide
Extra wide 
<x-dropdown label="w-40" width="w-40">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Narrow</a>
</x-dropdown>
<x-dropdown label="w-52 (default)" width="w-52">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard</a>
</x-dropdown>
<x-dropdown label="w-72" width="w-72">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Wide</a>
</x-dropdown>
<x-dropdown label="w-96" width="w-96">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Extra wide</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-40 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-40 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Narrow</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-52 (default) <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-72 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-72 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Wide</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-96 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-96 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Extra wide</a>
</div>
</div>

trigger を自前で組む (アバター・アイコンボタン等)

Edit Duplicate Delete
YT
Yamada Taro
taro@example.com
Profile Account settings
Log out 
<x-dropdown>
    <x-slot:trigger>
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-[var(--radius-field)] bg-primary text-primary-content text-sm font-medium">
            <x-i type="hamburger-menu" variant="linear" class="w-4 h-4" />
            Actions
        </button>
    </x-slot:trigger>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Edit</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Duplicate</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Delete</a>
</x-dropdown>
<x-dropdown position="bottom-start">
    <x-slot:trigger>
        <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-base-300 text-base-content font-semibold cursor-pointer">YT</div>
    </x-slot:trigger>
    <div class="px-4 py-2 border-b border-base-300">
        <div class="text-sm font-medium text-base-content">Yamada Taro</div>
        <div class="text-xs text-base-content/60">taro@example.com</div>
    </div>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Account settings</a>
    <hr class="my-1 border-base-300">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<div @click="open = !open" class="cursor-pointer">
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-[var(--radius-field)] bg-primary text-primary-content text-sm font-medium"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M20 7H4m16 5H4m16 5H4"></path></svg> Actions</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Edit</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Duplicate</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Delete</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<div @click="open = !open" class="cursor-pointer">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-base-300 text-base-content font-semibold cursor-pointer">
            YT
        </div>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<div class="px-4 py-2 border-b border-base-300">
<div class="text-sm font-medium text-base-content">
                Yamada Taro
            </div>
<div class="text-xs text-base-content/60">
                taro@example.com
            </div>
</div><a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Account settings</a>
<hr class="my-1 border-base-300">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</div>
</div>