css error popup

<x-layout>

    <link rel="stylesheet" href="/css/drop-down.css">

    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">

    <x-page-title>Liste des plongées</x-page-title>

    <div class="shadow-md max-w-full rounded-lg overflow-hidden border-2">

        <table class="text-sm text-left text-gray-500 w-full">

    <div id="toast-default"

    class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"

            role="alert" style="background-color: var(--badDarker);color: wheat;">

            role="alert" style="background-color: var(--badDarker);color: white;">

            <div class="ms-3 text-sm font-normal"><i class="fa-solid fa-triangle-exclamation" style="margin-right: 10px"></i> Attention, une erreur !</div>

            <button type="button" style="background-color: var(--badDarker);color: wheat;"

            <button type="button" style="background-color: var(--badDarker);color: white;"

            class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"

                data-dismiss-target="#toast-default" aria-label="Close">

                <span class="sr-only">Close</span>