<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Кнопки Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh bg-slate-100 p-8">
<div class="mx-auto flex max-w-lg flex-wrap gap-3">
<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700">
Primary
</button>
<button type="button" class="rounded-lg bg-slate-200 px-4 py-2 font-medium text-slate-800 hover:bg-slate-300">
Secondary
</button>
<button type="button" class="rounded-lg border border-indigo-600 px-4 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
Outline
</button>
<button type="button" class="rounded-lg bg-red-600 px-4 py-2 font-medium text-white hover:bg-red-700">
Удалить
</button>
<button type="button" disabled class="cursor-not-allowed rounded-lg bg-slate-300 px-4 py-2 font-medium text-slate-500">
Disabled
</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Кнопки Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-dvh bg-slate-100 p-8">
<div class="mx-auto flex max-w-lg flex-wrap gap-3">
<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-700">
Primary
</button>
<button type="button" class="rounded-lg bg-slate-200 px-4 py-2 font-medium text-slate-800 hover:bg-slate-300">
Secondary
</button>
<button type="button" class="rounded-lg border border-indigo-600 px-4 py-2 font-medium text-indigo-600 hover:bg-indigo-50">
Outline
</button>
<button type="button" class="rounded-lg bg-red-600 px-4 py-2 font-medium text-white hover:bg-red-700">
Удалить
</button>
<button type="button" disabled class="cursor-not-allowed rounded-lg bg-slate-300 px-4 py-2 font-medium text-slate-500">
Disabled
</button>
</div>
</body>
</html>