VibeCoderzVibeCoderz
Telegram
All Prompts
User Profile Row with Avatar & Availability preview
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>
All Prompts