HTML-компоненты

В статью можно добавить собственный HTML-компонент. Например, оформить с его помощью ссылки на соцсети:

Для этого кликните в панели редактирования HTML → , а затем задайте код.

Пример кода
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Button Footer</title>

  <!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            'primary-hover': '#2563eb',
          }
        }
      }
    }
  </script>

  <style>
    .footer-container {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem 1rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: #374151;
      background-color: transparent;
      border: 1.5px solid #d1d5db;
      border-radius: 0.5rem;
      text-decoration: none;
      transition: all 0.25s ease;
      white-space: nowrap;
      cursor: pointer;
    }

    .btn:hover {
      color: #3b82f6;
      border-color: #3b82f6;
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }

    .btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.25s ease;
    }

    .btn:hover svg {
      transform: translateX(2px);
    }

    .links-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    /* ----------------------------- */
    /* Тёмная тема  */
    /* ----------------------------- */

    html[data-theme="dark"] .text-muted {
      color: #ACB2D1;
    }

    html[data-theme="dark"] .btn {
      color: #ACB2D1;
      border-color: #4b5563;
    }

    html[data-theme="dark"] .btn:hover {
      color: #60a5fa;
      border-color: #60a5fa;
      box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
    }

    html[data-theme="dark"] .btn svg {
      stroke: currentColor;
    }
  </style>
</head>

<body class="footer-container bg-white dark:bg-gray-900">

  <div class="w-full max-w-3xl">

    <!-- Текст -->
    <p class="text-sm text-muted leading-relaxed mx-auto max-w-xl">
      Создайте удобный сайт с ответами на самые важные вопросы пользователей уже сейчас. Бесплатно для команд любого размера.
    </p>

    <!-- Кнопки -->
    <div class="links-container">

      <!-- Start for Free -->
      <a href="https://gram.ax/ru" class="btn" target="_blank" rel="noreferrer">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
          <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
          <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
          <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
        </svg>
        Начать
      </a>

      <!-- Telegram -->
      <a href="https://t.me/gramax_community" class="btn" target="_blank" rel="noreferrer">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path>
          <path d="m21.854 2.147-10.94 10.939"></path>
        </svg>
        Telegram-чат
      </a>

      <!-- GitHub -->
      <a href="https://github.com/Gram-ax/gramax" class="btn" target="_blank" rel="noreferrer">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
          <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
        GitHub
      </a>

    </div>
  </div>

</body>