Код IT
← Каталог

Tailwind — готовые блоки — Hero — первый экран

Фрагмент из «Tailwind — готовые блоки»: Hero — первый экран.

html lab1117 embed URL статья в энциклопедии
HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hero</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white">
  <section class="mx-auto flex min-h-dvh max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
    <p class="rounded-full bg-indigo-500/20 px-4 py-1 text-sm font-medium text-indigo-200">Новый курс</p>
    <h1 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
      Веб-разработка с нуля
    </h1>
    <p class="mt-4 max-w-xl text-lg text-slate-300">
      HTML, CSS, JavaScript и первый деплой — за один семестр.
    </p>
    <div class="mt-8 flex flex-wrap justify-center gap-3">
      <a href="#" class="rounded-lg bg-indigo-500 px-6 py-3 font-semibold hover:bg-indigo-400">
        Записаться
      </a>
      <a href="#" class="rounded-lg border border-slate-600 px-6 py-3 font-semibold text-slate-200 hover:bg-slate-800">
        Программа
      </a>
    </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>Hero</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white">
  <section class="mx-auto flex min-h-dvh max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
    <p class="rounded-full bg-indigo-500/20 px-4 py-1 text-sm font-medium text-indigo-200">Новый курс</p>
    <h1 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">
      Веб-разработка с нуля
    </h1>
    <p class="mt-4 max-w-xl text-lg text-slate-300">
      HTML, CSS, JavaScript и первый деплой — за один семестр.
    </p>
    <div class="mt-8 flex flex-wrap justify-center gap-3">
      <a href="#" class="rounded-lg bg-indigo-500 px-6 py-3 font-semibold hover:bg-indigo-400">
        Записаться
      </a>
      <a href="#" class="rounded-lg border border-slate-600 px-6 py-3 font-semibold text-slate-200 hover:bg-slate-800">
        Программа
      </a>
    </div>
  </section>
</body>
</html>