All Prompts
All Prompts

distancemetricsocialavatarsfitnesstracking
Distance Metric Card with Team
Карточка метрики дистанции с аватарами команды. Отслеживайте пройденные километры, отображайте участников и кнопку активности для фитнес-трекинга.
Prompt
<div class="ring-1 ring-stone-200 h-44 bg-white rounded-3xl p-5 shadow-sm">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-stone-500">Distance</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-blue-600">
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
</svg>
</div>
<p class="mt-3 text-2xl font-semibold tracking-tight">
3.37
<span class="ml-1 text-base font-medium text-stone-500">km</span>
</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<img class="h-6 w-6 rounded-full object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/eac34b73-c643-4433-82f0-5ec79e8f5fc9_320w.jpg" alt="">
<img class="h-6 w-6 -ml-2 rounded-full object-cover ring-2 ring-white" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5c473785-e642-4d2f-8148-f2bfbb42dbf0_320w.jpg" alt="">
</div>
<button class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-medium bg-stone-900 text-stone-100 hover:bg-stone-800">
Running
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>