sleepprogress-barhealthqualitydurationwellnesscard

Sleep Quality Progress Bar

Карточка трекинга сна с отображением длительности и качества через градиентный прогресс-бар. Отслеживайте прогресс сна.

Prompt

<div class="ring-1 ring-stone-200 h-44 w-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">Sleep</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-indigo-600">
      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path>
    </svg>
  </div>
  <p class="mt-3 text-2xl font-semibold tracking-tight">7h 32m</p>
  <div class="mt-3 h-2 w-full overflow-hidden rounded-full bg-stone-200">
    <div class="h-full rounded-full bg-gradient-to-r from-indigo-400 to-purple-500" style="width: 89%"></div>
  </div>
  <p class="mt-2 text-xs text-stone-500">Quality: 89%</p>
</div>

All Prompts