<div class="bg-gray-100 p-4 lg:p-8 lg:h-screen">
    <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8 bg-red-300 rounded-lg relative">
            <span
                class="h-16 w-16 text-red-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 inline-block text-red-300" 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>
            </span>
            <div class="py-8">
                <h2 class="px-4 text-center text-2xl font-extrabold text-red-900">
                    Oops! Payment failed
                </h2>
                <p class="mt-2 text-center text-red-800 px-4">
                    We could not process your order as the payment got failed. Kindly contact our sales team.
                </p>
            </div>
        </div>
    </div>
</div>

                

                    const Failure = () => {
    return (
        <div className="bg-gray-100 p-4 lg:p-8 lg:h-screen">
            <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
                <div className="max-w-md w-full space-y-8 bg-red-300 rounded-lg relative">
                    <span className="h-16 w-16 text-red-300 bg-gray-100 inline-flex flex-row items-center justify-center rounded-full absolute -top-8 left-0 right-0 mx-auto">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-16 w-16 inline-block text-red-300"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path
                                fillRule="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"
                                clipRule="evenodd"
                            />
                        </svg>
                    </span>
                    <div className="py-8">
                        <h2 className="px-4 text-center text-2xl font-extrabold text-red-900">
                            Oops! Payment failed
                        </h2>
                        <p className="mt-2 text-center text-red-800 px-4">
                            We could not process your order as the payment got
                            failed. Kindly contact our sales team.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Failure;