Answers for "tailwindcss alert message"

alert tailwind css

<div class="relative py-3 pl-4 pr-10 leading-normal text-red-700 bg-red-100 rounded-lg" role="alert">
  <p>A simple alert with text and a right icon</p>
  <span class="absolute inset-y-0 right-0 flex items-center mr-4">
    <svg class="w-4 h-4 fill-current" role="button" viewBox="0 0 20 20"><path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
  </span>
</div>

tailwind alert box

<!-- Only Works on 2.0+ Version -->
<section class="py-20 mt-10 flex justify-center ...">
        <div
            class="bg-gray-900 py-1 w-11/12 text-center flex-wrap md:flex-nowrap rounded-md border-t-4 border-green-400 flex justify-center ...">
            <div class="bg- py-8 w-1/12 ml-1 text-center rounded-full flex justify-center ...">
                <svg class="w-10 text-green-300 h-12 text-gray-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="bg- py-2 md:py-6 w-10/12 ml-1 text-center rounded-full flex justify-center ...">
                <p class="text-green-300"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, architecto
                    optio modi quos
                    omnis
                    itaque ad aspernatur doloremque illo ullam atque praesentium alias laudantium ab, illum non odit
                    suscipit debitis.</p>
            </div>
        </div>
    </section>