Retro Media Embed コンポーネント
Triadicカラースキームとレスポンシブダークテーマのサポートを備えたビジネス/企業Webサイト向けのレトロ/ビンテージメディア埋め込みコンポーネント。
HTMLコード
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
<div class="relative" style="padding-bottom: 56.25%;">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Rad Video Title</h3>
<span class="text-sm">5:32</span>
</div>
<p class="text-sm mb-4">
Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis.
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
<span class="text-sm font-semibold">Duke Silver</span>
</div>
</div>
</div>
</div>関連コンポーネント
メディア埋め込みコンポーネント - ミニマリストのアーストーン
ダッシュボード用のミニマリストメディア埋め込みコンポーネントで、アースカラーを使用したレスポンシブデザインとダークテーマのサポートを備えています。ビデオプレーヤー、タイトル、説明、チャンネル情報が表示されます。