alert tailwind css

1<div class="relative py-3 pl-4 pr-10 leading-normal text-red-700 bg-red-100 rounded-lg" role="alert">
2  <p>A simple alert with text and a right icon</p>
3  <span class="absolute inset-y-0 right-0 flex items-center mr-4">
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>
5  </span>
6</div>

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