类型：组件 · 分类：卡片 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<!-- From Uiverse.io by Manish-Tamang - Tags: twitter, card, tailwind, tailwindcss -->
<div
class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden mx-auto"
>
<div class="flex justify-between items-center px-6 py-4">
<div class="flex space-x-4">
<div>
<svg
class="rounded-full bg-yellow-400"
height="48"
width="48"
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
></svg>
</div>
<div>
<div class="text-lg font-bold dark:text-white">Manish Gole</div>
<div class="text-sm text-gray-500 dark:text-gray-200">@manishgole</div>
</div>
</div>
<div>
<button
type="button"
role="combobox"
aria-controls="radix-:R6dafnnja:"
aria-expanded="false"
aria-autocomplete="none"
dir="ltr"
data-state="closed"
data-placeholder=""
class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
aria-label="Options"
>
<svg
class="w-6 h-6 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 opacity-50"
aria-hidden="true"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<select
aria-hidden="true"
tabindex="-1"
style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"
>
<option value=""></option>
</select>
</div>
</div>
<div class="px-6 py-4">
<div class="text-sm text-gray-800 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
pellentesque id erat at blandit. Donec ullamcorper turpis vitae dolor
lacinia mollis. Donec at augue eget ipsum porttitor interdum.
</div>
</div>
<div
class="flex justify-between items-center space-x-4 pt-4 border-t border-gray-200 dark:border-gray-700 p-4"
>
<div class="flex items-center space-x-4">
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
<path d="M8 16H3v5"></path>
</svg>
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<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>
</svg>
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" x2="12" y1="3" y2="15"></line>
</svg>
</div>
<div class="flex items-center space-x-4">
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-200"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
</svg>
</div>
</div>
</div>