Using tailwindcss bg-* in modal content view

  <div class="flex flex-col md:flex-row md:justify-between items-center">
        <div>
            <span class="text-xs">ID</span>
            <br />
            <span class="text-s font-semibold select-all">
                {{ $order->id }}
            </span>
        </div>
        <span class="text-lg font-semibold bg-success rounded-full" @class([
            'bg-success' => $order->status == 1,
            'bg-danger' => $order->status == 2,
            'bg-warning' => $order->status == 3,
        ])>
            {{ $order->status_text  }}
        </span>
    </div>