Alerts

Success with Close Button

<div class="m-10">
<div class="bg-green-50 w-full flex justify-between items-center rounded-lg p-4">
            <div class="flex justify-start items-center space-x-5">
                <div class="text-green-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                </div>
                <p class="text-sm text-green-800 font-medium">Successfully Completed</p>
            </div>
            <div class="text-green-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
            </div>
        </div>
</div>

Error with Multiple Messages

<div class="bg-red-50 rounded-lg p-4 m-10">
    <div class="flex justify-start items-start space-x-5">
        <div class="text-red-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                    clip-rule="evenodd" />
            </svg>
        </div>
        <div class="space-y-3">
            <p class="text-sm text-red-800 font-medium">There were 2 errors while submitting your form</p>
            <ul class="list-disc list-inside text-red-800 text-sm">
                <li>Your password must be atleast 8 characters</li>
                <li>Your password must include atleast 1 capital letter and 1 special character</li>
            </ul>
            <div class="flex space-x-3 pt-2">
                <a href="#" class="text-sm text-red-800 font-medium">View Details</a>
                <a href="#" class="text-sm text-red-800 font-medium">Dismiss</a>
            </div>
        </div>
    </div>
</div>

Warning

<div class="bg-yellow-50 m-10 rounded-lg p-4">
    <div class="flex justify-start items-start space-x-5">
        <div class="text-yellow-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                    clip-rule="evenodd" />
            </svg>
        </div>
        <div class="space-y-3">
            <p class="text-sm text-yellow-700 font-medium">You're running out of storage space</p>
            <p class="text-sm text-yellow-600">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</div>

Success with Button

<div class="bg-blue-50 flex justify-between items-center rounded-lg p-4 m-10">
    <div class="flex justify-start items-center space-x-5">
        <div class="text-blue-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd" />
            </svg>
        </div>
        <p class="text-sm text-blue-400 font-medium">Successfully Completed</p>
    </div>
    <div class="text-blue-400 flex items-center">
        <p class="text-sm">Details</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
    </div>
</div>

Success with Multiple Buttons

<div class="bg-green-50 rounded-lg p-4 m-10">
    <div class="flex justify-start items-start space-x-5">
        <div class="text-green-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clip-rule="evenodd" />
            </svg>
        </div>
        <div class="space-y-3">
            <p class="text-sm text-green-800 font-medium">Successfully Completed</p>
            <p class="text-sm text-green-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididu</p>
            <div class="flex space-x-3 pt-2">
                <a href="#" class="text-sm text-green-800 font-medium">View Details</a>
                <a href="#" class="text-sm text-green-800 font-medium">Dismiss</a>
            </div>
        </div>
    </div>
</div>