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

Tailwind — готовые блоки — Статистика в одну строку

Фрагмент из «Tailwind — готовые блоки»: Статистика в одну строку.

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>Stats</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-indigo-600 p-8 text-white">
  <div class="mx-auto grid max-w-4xl gap-6 text-center sm:grid-cols-3">
    <div>
      <p class="text-3xl font-bold">1200+</p>
      <p class="mt-1 text-indigo-100">учеников</p>
    </div>
    <div>
      <p class="text-3xl font-bold">48</p>
      <p class="mt-1 text-indigo-100">уроков</p>
    </div>
    <div>
      <p class="text-3xl font-bold">4.9</p>
      <p class="mt-1 text-indigo-100">средняя оценка</p>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stats</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-indigo-600 p-8 text-white">
  <div class="mx-auto grid max-w-4xl gap-6 text-center sm:grid-cols-3">
    <div>
      <p class="text-3xl font-bold">1200+</p>
      <p class="mt-1 text-indigo-100">учеников</p>
    </div>
    <div>
      <p class="text-3xl font-bold">48</p>
      <p class="mt-1 text-indigo-100">уроков</p>
    </div>
    <div>
      <p class="text-3xl font-bold">4.9</p>
      <p class="mt-1 text-indigo-100">средняя оценка</p>
    </div>
  </div>
</body>
</html>