Categorie

Componenti Messaggi di avviso

Messaggi di avviso

Messaggi informativi per avvisare gli utenti

Componente Messaggi di avviso

Un componente di messaggio di avviso complesso, vibrante, in stile glassmorphism per l'e-commerce, con supporto per la modalità oscura.

Apri anteprima

                <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>

Componente Messaggi di avviso

Un componente di messaggio di avviso semplice, reattivo e in scala di grigi per siti di e-commerce, con supporto per la modalità scura.

Apri anteprima

                <div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">New message:</span> Your order has been placed successfully.
  </div>
</div>

Un componente reattivo per i messaggi di avviso progettato con effetto glassmorphism per l'e-commerce. Presenta un layout semplice con una combinazione di colori monocromatica e il supporto della modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md rounded-xl border border-gray-300 dark:border-gray-600 shadow-lg p-6 max-w-md w-full">
        <h2 class="text-xl text-gray-800 dark:text-gray-200 mb-4">Alert Message</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">
            Your order has been placed successfully! You will receive a confirmation email shortly.
        </p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-sm">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">Just now</p>
            </div>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

Componente Messaggi di avviso

Componente di messaggio di avviso in scala di grigi retrò / vintage per i social media con supporto per la modalità oscura

Apri anteprima

                <div class="flex flex-col space-y-4 p-4 bg-gray-100 dark:bg-gray-800">

  <!-- Success Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
      <p class="text-sm font-mono">Success: Your post was published.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
      <p class="text-sm font-mono">Info: New messages available.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
      </svg>
      <p class="text-sm font-mono">Warning: Profile incomplete.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-500 dark:border-gray-600 rounded shadow-md">
    <div class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
      <p class="text-sm font-mono">Error: Failed to send message.</p>
    </div>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

</div>

Componente Messaggi di avviso

Un semplice componente monocromatico per i messaggi di avviso per i blog con animazioni incentrate sulla microinterazione, supporto per la modalità scura e reattività.

Apri anteprima

                <div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-4">
  <div class="flex items-center px-4 py-3 animate-bounce">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-300">
        New article published!
      </p>
    </div>
  </div>
</div>

Componente Messaggi di avviso

Un componente di messaggi di avviso in stile brutalista con una combinazione di colori pastello, progettato per siti Web aziendali/aziendali e reattivo con supporto per temi scuri.

Apri anteprima

                <div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
    <!-- Alert Message Header -->
    <h2 class="text-2xl font-bold">Alert Messages</h2>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">John Doe</span>
            <p>This is an informational alert message to notify you about updates.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Jane Smith</span>
            <p>This is a warning alert message to notify you about potential issues.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Alex Johnson</span>
            <p>This is a success alert message to confirm your action.</p>
        </div>
    </div>
</div>

Componente Messaggi di avviso

Un componente di messaggio di avviso con un design retrò/vintage, incluso il supporto per la modalità oscura e la reattività.

Apri anteprima

                <div class="rounded-md bg-yellow-50 p-4 dark:bg-yellow-900">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-5 w-5 text-yellow-400 dark:text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M8.485 2.495a.75.75 0 00-1.06 0L3.235 6.725a4.5 4.5 0 000 6.35l4.19 4.19a.75.75 0 001.06 0l4.19-4.19a4.5 4.5 0 000-6.35L9.545 2.495a.75.75 0 00-1.06 0zM9.75 9.75a.75.75 0 000 1.5h.008a.75.75 0 000-1.5H9.75z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Attention needed</h3>
      <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ab dignissimos sint officiis. </p>
      </div>
      <div class="mt-4">
        <div class="-mx-2 -my-1 flex">
          <button type="button" class="rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Take action</button>
          <button type="button" class="ml-3 rounded-md bg-yellow-50 px-2 py-1.5 text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:focus:ring-yellow-400 dark:focus:ring-offset-yellow-900">Dismiss</button>
        </div>
      </div>
    </div>
  </div>
</div>

Componente Messaggi di avviso

Un componente per i messaggi di avviso con un design 3D, funzionalità reattive e supporto per il tema scuro utilizzando Tailwind CSS. Il componente include diversi tipi di avviso (successo, errore, avviso, informazioni) con icone e messaggi.

Apri anteprima

                <div class="flex flex-col space-y-4 p-6">  <!-- Success Alert -->  <div class="relative flex items-center justify-between bg-green-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-green-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-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>      <span class="font-semibold">Success:</span>      <span>Your action was successful.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Error Alert -->  <div class="relative flex items-center justify-between bg-red-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-red-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-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>      <span class="font-semibold">Error:</span>      <span>Something went wrong.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Warning Alert -->  <div class="relative flex items-center justify-between bg-yellow-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-yellow-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-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 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>      </svg>      <span class="font-semibold">Warning:</span>      <span>Proceed with caution.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Info Alert -->  <div class="relative flex items-center justify-between bg-blue-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-blue-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-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>      <span class="font-semibold">Info:</span>      <span>Here is some information.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div></div>