← Каталог
Tailwind — готовые блоки — Карточка с hover-эффектом
Фрагмент из «Tailwind — готовые блоки»: Карточка с hover-эффектом.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hover card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-slate-50 p-6">
<article class="group w-full max-w-xs cursor-pointer rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
<div class="h-32 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 transition group-hover:from-indigo-500 group-hover:to-purple-600"></div>
<h2 class="mt-4 font-semibold text-slate-900 group-hover:text-indigo-600">Проект «Портфолио»</h2>
<p class="mt-1 text-sm text-slate-600">Наведите — карточка приподнимается.</p>
</article>
</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hover card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex min-h-dvh items-center justify-center bg-slate-50 p-6">
<article class="group w-full max-w-xs cursor-pointer rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
<div class="h-32 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 transition group-hover:from-indigo-500 group-hover:to-purple-600"></div>
<h2 class="mt-4 font-semibold text-slate-900 group-hover:text-indigo-600">Проект «Портфолио»</h2>
<p class="mt-1 text-sm text-slate-600">Наведите — карточка приподнимается.</p>
</article>
</body>
</html>