← Каталог
Tailwind — готовые блоки — Тарифы (pricing)
Фрагмент из «Tailwind — готовые блоки»: Тарифы (pricing).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-8">
<section class="mx-auto max-w-4xl">
<h2 class="text-center text-2xl font-bold">Тарифы</h2>
<div class="mt-8 grid gap-6 md:grid-cols-2">
<article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold">Базовый</h3>
<p class="mt-2 text-3xl font-bold">0 ₽</p>
<ul class="mt-4 space-y-2 text-sm text-slate-600">
<li>• Доступ к материалам</li>
<li>• Тесты без проверки</li>
</ul>
<button type="button" class="mt-6 w-full rounded-lg border border-indigo-600 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
Начать
</button>
</article>
<article class="rounded-2xl border-2 border-indigo-600 bg-white p-6 shadow-md">
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Популярный</p>
<h3 class="mt-1 text-lg font-semibold">Pro</h3>
<p class="mt-2 text-3xl font-bold">990 ₽<span class="text-base font-normal text-slate-500">/мес</span></p>
<ul class="mt-4 space-y-2 text-sm text-slate-600">
<li>• Все материалы и проекты</li>
<li>• Проверка домашних работ</li>
<li>• Сертификат</li>
</ul>
<button type="button" class="mt-6 w-full rounded-lg bg-indigo-600 py-2 font-medium text-white hover:bg-indigo-700">
Оформить
</button>
</article>
</div>
</section>
</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-8">
<section class="mx-auto max-w-4xl">
<h2 class="text-center text-2xl font-bold">Тарифы</h2>
<div class="mt-8 grid gap-6 md:grid-cols-2">
<article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold">Базовый</h3>
<p class="mt-2 text-3xl font-bold">0 ₽</p>
<ul class="mt-4 space-y-2 text-sm text-slate-600">
<li>• Доступ к материалам</li>
<li>• Тесты без проверки</li>
</ul>
<button type="button" class="mt-6 w-full rounded-lg border border-indigo-600 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
Начать
</button>
</article>
<article class="rounded-2xl border-2 border-indigo-600 bg-white p-6 shadow-md">
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Популярный</p>
<h3 class="mt-1 text-lg font-semibold">Pro</h3>
<p class="mt-2 text-3xl font-bold">990 ₽<span class="text-base font-normal text-slate-500">/мес</span></p>
<ul class="mt-4 space-y-2 text-sm text-slate-600">
<li>• Все материалы и проекты</li>
<li>• Проверка домашних работ</li>
<li>• Сертификат</li>
</ul>
<button type="button" class="mt-6 w-full rounded-lg bg-indigo-600 py-2 font-medium text-white hover:bg-indigo-700">
Оформить
</button>
</article>
</div>
</section>
</body>
</html>