미디어 임베드 컴포넌트
glassmorphism 효과로 디자인된 미디어 임베드 구성 요소로, 어두운 테마를 지원하는 비즈니스 웹 사이트에 적합한 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
<p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
</div>
</div>
<div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
<iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
<div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
</div>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
</div>
</div>