Display a green notification with an icon, text, and a close button.

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>


<div class="flex items-center justify-between gap-4 rounded-lg border border-green-400 bg-green-100 px-4 py-3 text-green-800">
  <div class="flex items-center gap-2">
    <!-- ikon -->
    <svg class="h-5 w-5 text-green-600" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
    </svg>

    <!-- szöveg -->
    <span>A terméket beraktuk a kosaradba</span>
  </div>

  <!-- bezárás -->
  <button class="text-green-700 hover:text-green-900">
    ✕
  </button>
</div>