Компоненты интерфейсов
Библиотека frontend-компонентов: шапки, меню, карточки, формы, кнопки и таблицы. Компоненты показаны живыми — их можно посмотреть в работе, а не только на скриншоте.
Шапка сайта
Шапки сайтов
Логотип, навигация и кнопка действия. На мобильных навигация сворачивается в раскрывающееся меню.
Показать HTML
<header class="w-full border-b border-line bg-card">
<div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-3">
<a href="#" class="flex items-center gap-2 text-base font-semibold tracking-tight text-ink">
<span class="inline-block h-6 w-6 rounded-md bg-ink"></span>
Студия
</a>
<nav class="hidden items-center gap-6 md:flex">
<a href="#" class="text-sm text-muted transition-colors hover:text-ink">Проекты</a>
<a href="#" class="text-sm text-muted transition-colors hover:text-ink">Компоненты</a>
<a href="#" class="text-sm text-muted transition-colors hover:text-ink">Графика</a>
<a href="#" class="text-sm text-muted transition-colors hover:text-ink">Услуги</a>
</nav>
<div class="flex shrink-0 items-center gap-2">
<a href="#" class="btn btn-primary btn-sm">Обсудить проект</a>
<details class="relative md:hidden">
<summary class="btn btn-outline btn-sm cursor-pointer" aria-label="Открыть меню">Меню</summary>
<div class="absolute right-0 top-full z-20 mt-2 w-[min(16rem,calc(100vw-2.5rem))] rounded-lg border border-line bg-card p-2 shadow-none">
<a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Проекты</a>
<a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Компоненты</a>
<a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Графика</a>
<a href="#" class="block rounded-md px-3 py-2 text-sm text-muted hover:bg-sand hover:text-ink">Услуги</a>
</div>
</details>
</div>
</div>
</header>
Связь
Нужен свой компонент?
Опишите элемент интерфейса — соберу его отдельно и покажу в работе.