All Prompts
All Prompts

profileavatartailwindresponsivestatusiconuser-carddashboard
User Profile Row with Avatar & Availability
Адаптивный блок профиля пользователя: аватар, имя, статус доступности. Идеально для списков команд, дашбордов. Tailwind CSS.
Prompt
<div class="flex gap-4 mb-8 items-center justify-between w-full max-w-3xl">
<div class="flex gap-4 items-center">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/13a5581f-35ac-4b9e-ae7c-47573e09ab8e_320w.jpg" alt="Portrait" class="h-10 w-10 ring-1 ring-neutral-200 object-cover rounded-full">
<div class="min-w-0">
<p class="truncate text-sm font-medium font-geist">Alex Parker</p>
<p class="truncate text-xs text-neutral-500 font-geist">Designer, coder</p>
</div>
<div class="hidden sm:flex gap-2 text-neutral-400 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(163, 163, 163);"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(163, 163, 163);"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></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" data-lucide="dribbble" class="lucide lucide-dribbble h-4 w-4"><circle cx="12" cy="12" r="10" class=""></circle><path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" class=""></path><path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" class=""></path><path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" class=""></path></svg>
</div>
</div>
<div class="hidden sm:flex items-center gap-2 text-sm">
<span class="relative inline-flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
</span>
<span class="text-neutral-700 font-geist">3 open slots for September</span>
</div>
</div>