미디어 임베드 컴포넌트
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>
관련 구성 요소
미디어 임베드 컴포넌트
그레이스케일 3D 디자인과 다크 모드를 지원하는 간단하고 반응이 빠른 미디어 임베드 구성 요소로 비즈니스 웹 사이트에 적합합니다. 스타일링에 Tailwind CSS를 사용합니다.
미디어 임베드 컴포넌트
블로그/콘텐츠 사이트에 대한 어두운 테마를 지원하는 반응형 미디어 임베드 구성 요소로, 머티리얼 디자인 원칙, 트라이어딕 색 구성표 및 적당한 복잡성으로 스타일링되었습니다. 포함된 비디오 자리 표시자 및 관련 기사 링크가 포함되어 있습니다.