1.Triển khai requirement tạo hiệu ứng border phát sáng (glowing effect)

image.png

Only chỉ sử dụng tailwind thôi

<div className="text-center mt-5">
            <div className="max-w-5xl mx-auto">
              <div className="relative aspect-video rounded-lg overflow-hidden p-1 bg-gradient-to-br from-yellow-400 via-orange-500 to-yellow-600 shadow-[0_0_50px_rgba(251,191,36,0.6)]">
                <div className="w-full h-full bg-gray-800 rounded-lg overflow-hidden">
                  {/* <div className="absolute inset-0 flex items-center justify-center">
                    <Play className="w-16 h-16 text-yellow-400" />
                  </div> */}
                  {/* YouTube video embed */}
                  <iframe className="w-full h-full object-cover"
                  // src="<https://www.youtube.com/embed/k9zTr2MAFRg?si=UIOL4RtOg7vF0ZQZ>" 
                   src= "<https://www.youtube.com/embed/-LWJFwyy9Nw?si=5nF7iHTHcpAypVGh>"
                   title="YouTube video player" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                        referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
                </div>
              </div>
            </div>
	        </div>
  1. text-center mt-5

  1. max-w-5xl mx-auto

  1. relative aspect-video rounded-lg overflow-hidden p-2 bg-gradient-to-br from-yellow-400 via-orange-500 to-yellow-600 shadow-[0_0_30px_rgba(251,191,36,0.6)]

Đây là div tạo hiệu ứng khung viền gradient và bóng đổ bao quanh video: