Componente di incorporamento multimediale
Un componente di incorporamento multimediale brutalista, vibrante e complesso per i blog, costruito con un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="dark:bg-gray-900 dark:text-white p-8">
<div class="max-w-4xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-4 border-black dark:border-white p-4">
<div class="relative pb-56 md:pb-0 md:h-96">
<iframe class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-white" 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="flex flex-col justify-between">
<div>
<h2 class="text-3xl font-bold mb-4 border-b-4 border-black dark:border-white pb-2">Embedded Media Title</h2>
<p class="mb-4">This is a description of the embedded media. It is intentionally a bit rough around the edges to fit the brutalist style. The vibrant colors and bold borders create a sense of energy and excitement.</p>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="font-bold">Author Name</p>
<p class="text-sm">Date Published</p>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="bg-red-500 text-white px-6 py-3 border-4 border-black dark:border-white font-bold text-lg hover:bg-red-700">Watch Now</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di incorporamento multimediale
Un componente Media Embed reattivo con supporto per temi scuri per blog/siti di contenuti, con uno stile basato sui principi del Material Design, una combinazione di colori triadica e una complessità moderata. Include un segnaposto video incorporato e collegamenti agli articoli correlati.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo progettato con uno stile di neumorfismo, con colori vivaci e un'interfaccia interattiva adatta per applicazioni dashboard.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale dal design minimalista e piatto con combinazione di colori dei toni della terra, adatto per siti Web aziendali/aziendali. Si tratta di un componente di complessità moderata con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.