tailwind css alert examples

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

Tags:

Html Example