VibeCoderzVibeCoderz
Telegram
All Prompts
Vertical Timeline Card with Dotted Markers preview
timelinecardlisttailwindverticalchronologyresume

Vertical Timeline Card with Dotted Markers

Вертикальная карточка таймлайна с точечными маркерами. Отображает хронологические события с годами. Идеально для резюме, истории проектов.

Prompt

<div class="bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="timeline" class="lucide w-4 h-4 text-white/80"></svg>
                <h3 class="text-xl font-semibold tracking-tight">Timeline</h3>
              </div>
              <ol class="mt-3">
                <li class="relative pl-6 pb-4 border-l border-white/10">
                  <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white"></span>
                  <p class="text-xs text-white/60">2025</p>
                  <p class="text-sm font-medium tracking-tight">Independent — Designer &amp; Engineer</p>
                </li>
                <li class="relative pl-6 pb-4 border-l border-white/10">
                  <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/80"></span>
                  <p class="text-xs text-white/60">2022 — 2024</p>
                  <p class="text-sm font-medium tracking-tight">Senior Product Designer — Atlas Analytics</p>
                </li>
                <li class="relative pl-6 pb-4 border-l border-white/10">
                  <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/70"></span>
                  <p class="text-xs text-white/60">2019 — 2022</p>
                  <p class="text-sm font-medium tracking-tight">Product Designer — Tempo Health</p>
                </li>
                <li class="relative pl-6 border-l border-white/10">
                  <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/60"></span>
                  <p class="text-xs text-white/60">2017 — 2019</p>
                  <p class="text-sm font-medium tracking-tight">Frontend Engineer — Nexus Commerce</p>
                </li>
              </ol>
            </div>
All Prompts