列表是一个垂直布局,用于按行显示信息。
类名 | 类型 | |
---|---|---|
列表 | 组件 | 一个垂直弹性布局,用于包含列表行 |
列表行 | 组件 | 列表中的项目。一个水平网格布局,用于包含数据 |
列表列换行 | 修饰符 | 用于 `list-row` 的直接子元素之一,将其推到下一行 |
列表列增长 | 修饰符 | 用于 `list-row` 的直接子元素之一,使其填充剩余空间 |
默认情况下,`list-row` 的第二个子元素
列表行
将填充剩余空间。你可以使用列表列增长
在另一个子元素上,使其填充剩余空间。
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">01</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div class="$$list-col-grow"> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">02</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div class="$$list-col-grow"> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">03</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div class="$$list-col-grow"> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="$$list-col-grow">
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div class="$$list-col-grow">
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div class="$$list-col-grow">
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
</ul>
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">01</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div class="$$list-col-grow"> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">02</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div class="$$list-col-grow"> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> <li class="$$list-row"> <div class="text-4xl font-thin opacity-30 tabular-nums">03</div> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div class="$$list-col-grow"> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="$$list-col-grow">
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div class="$$list-col-grow">
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div class="$$list-col-grow">
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
</ul>
"Remaining Reason" 一炮而红,因其令人难忘的声音和情感深度而备受赞誉。一次病毒式表演为其带来了广泛的认可,使其成为 Dio Lupa 最具代表性的曲目之一。
"Bears of a Fever" 以其强烈的能量和神秘的歌词吸引了观众。在粉丝在网上广泛分享后,它的受欢迎程度迅速飙升,为 Ellie 赢得了评论界的好评。
"Cappuccino" 因其流畅的旋律和相关的题材而迅速受到关注。这首歌的成功将 Sabrino 推向了聚光灯下,巩固了他们作为一颗冉冉升起的新星的地位。
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <p class="$$list-col-wrap text-xs"> "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <p class="$$list-col-wrap text-xs"> "Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <p class="$$list-col-wrap text-xs"> "Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<p class="$$list-col-wrap text-xs">
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<p class="$$list-col-wrap text-xs">
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<p class="$$list-col-wrap text-xs">
"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>
<ul class="$$list bg-base-100 rounded-box shadow-md"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div> <div> <div>Dio Lupa</div> <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div> </div> <p class="$$list-col-wrap text-xs"> "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div> <div> <div>Ellie Beilish</div> <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div> </div> <p class="$$list-col-wrap text-xs"> "Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> <li class="$$list-row"> <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div> <div> <div>Sabrino Gardener</div> <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div> </div> <p class="$$list-col-wrap text-xs"> "Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star. </p> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg> </button> <button class="$$btn $$btn-square $$btn-ghost"> <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg> </button> </li> </ul>
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<p class="$$list-col-wrap text-xs">
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<p class="$$list-col-wrap text-xs">
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<p class="$$list-col-wrap text-xs">
"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>