Компоненты Предупреждающие сообщения Компонент "Предупреждающие сообщения"

Компонент "Предупреждающие сообщения"

Сложный, яркий, оформленный в стиле glassmorphism компонент предупреждающих сообщений для электронной коммерции с поддержкой темного режима.

Предварительный просмотр

HTML-код

<div class="container mx-auto p-8">

  <!-- Light Mode - Vibrant Glassmorphism Alerts -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-green-800 font-semibold">Success!</p>
          <p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-800 font-semibold">Info!</p>
          <p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-800 font-semibold">Warning!</p>
          <p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-600">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-red-800 font-semibold">Danger!</p>
          <p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Dark Mode - Vibrant Glassmorphism Alerts -->
  <div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Success Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-green-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-green-300 font-semibold">Success!</p>
          <p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
        </div>
      </div>
    </div>

    <!-- Info Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-blue-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-blue-300 font-semibold">Info!</p>
          <p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
        </div>
      </div>
    </div>

    <!-- Warning Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-yellow-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-yellow-300 font-semibold">Warning!</p>
          <p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
        </div>
      </div>
    </div>

    <!-- Danger Alert -->
    <div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
      <div class="flex items-center">
        <div class="flex-shrink-0 text-red-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="ml-3">
          <p class="text-red-300 font-semibold">Danger!</p>
          <p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
        </div>
      </div>
    </div>

  </div>


</div>

Связанные компоненты

Компонент "Предупреждающие сообщения"

Компонент «Тревожные сообщения» со стилем Material Design, цветовой гаммой «Пастель» и уровнем сложности «Сложный» для целей портфолио. Адаптивный дизайн с поддержкой темных тем. Код JavaScript не нужен, только HTML с классами Tailwind. В темном режиме для стилизации используется префикс Tailwind dark: . Изображения используют picsum.photos для изображений и randomuser.me для аватаров.

Открытый

Компонент "Предупреждающие сообщения"

Компонент предупреждающих сообщений с 3D-дизайном, адаптивными функциями и поддержкой темной темы с использованием Tailwind CSS. Компонент включает в себя различные типы оповещений (успех, ошибка, предупреждение, информация) с иконками и сообщениями.

Открытый

Компонент "Предупреждающие сообщения"

Отзывчивый компонент предупреждающих сообщений, выполненный в минималистичном/плоском стиле с пастельной цветовой гаммой, подходящий для интерфейсов социальных сетей, включая поддержку темных тем.

Открытый