Как применить многоцветную тень к компоненту обратного отсчета? ⇐ CSS

[Anonymous]

Я работаю над компонентом обратного отсчета в React, используя Tailwind CSS и встроенные стили. Я хочу применить эффект разноцветной тени вокруг контейнера, но мне не удается правильно отображать цвета. Тень блока либо отображает только один цвет (оранжевый), либо отображается не так, как ожидалось.

Код: Выделить всё

'use client';

import React, {useState, useEffect} from 'react';

interface CountdownProps {
header1: string;
header2: string;
headerClass?: string;
}

const CountdownComponent: React.FC = ({
header1,
header2,
headerClass = 'text-[30px] font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-[#ffd22f]',
}) => {
const [timeLeft, setTimeLeft] = useState({
days: 999,
hours: 99,
minutes: 99,
seconds: 99,
});

useEffect(() => {
const countDownDate = new Date('2024-09-31T23:59:59').getTime();

const timer = setInterval(() => {
const now = new Date().getTime();
const distance = countDownDate - now;

const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

setTimeLeft({days, hours, minutes, seconds});

if (distance < 0) {
clearInterval(timer);
setTimeLeft({days: 0, hours: 0, minutes: 0, seconds: 0});
}
}, 1000);

return () => clearInterval(timer);
}, []);

// Function to pad numbers to two digits
const formatTime = (time: number) => {
return time <  10 ? `0${time}` : time.toString();
};

return (


{header1}
{header2}

className="relative w-[370px] sm:w-full max-w-[720px] mt-6 rounded-2xl"
style={{
boxShadow: `
0 0 20px 5px rgba(255, 173, 0, 0.3),   /* Yellow (#FFAD00) */
0 0 20px 5px rgba(255, 56, 56, 0.3),   /* Red (#F53838) */
0 0 20px 5px rgba(255, 0, 0, 0.3)      /* Dark Red (#FF0000) */
`,
background: 'linear-gradient(180deg, #28272F 0%, #040404 100%)',
}}
>
{/* Background box with gradient and shadow */}




{formatTime(timeLeft.days)}


DAYS


:


{formatTime(timeLeft.hours)}


HOURS


:


{formatTime(timeLeft.minutes)}


MINUTES


:


{formatTime(timeLeft.seconds)}


SECONDS





{/* Last month's info */}

The winner will be announced

via email on May 31st.


);
};

export default CountdownComponent;

Я хочу применить разноцветную тень (желтую, красную и темно-красную) вокруг контейнера, в котором отображается таймер обратного отсчета.


Однако появляется только оранжевая тень, а другие цвета кажутся переопределенными или невидимыми.



Подробнее здесь: https://stackoverflow.com/questions/791 ... -component