Composants multimédias

Composant Composants multimédias

Un composant de composants multimédias réactif avec un design brutal, des couleurs vives et une mise en page complexe pour un tableau de bord, avec prise en charge du thème sombre et sans JavaScript. Utilise picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Media Card 1 -->
        <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-x-3 hover:skew-x-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Media 1" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Data Stream Alpha</h3>
            <p class="text-black dark:text-white text-sm mb-4">Real-time analytics and visualization of sensor data from industrial machinery.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-yellow-300 dark:bg-yellow-500 px-3 py-1 border-2 border-black dark:border-white">Live</span>
                <a href="#" class="text-black dark:text-white bg-red-500 dark:bg-red-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-red-600 dark:hover:bg-red-800 transition-colors duration-200">View Dashboard</a>
            </div>
        </div>

        <!-- Media Card 2 -->
        <div class="bg-green-400 dark:bg-green-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-y-3 hover:skew-y-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Media 2" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">System Health Monitor</h3>
            <p class="text-black dark:text-white text-sm mb-4">Overview of server health, network latency, and application performance metrics.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-blue-300 dark:bg-blue-500 px-3 py-1 border-2 border-black dark:border-white">Warning</span>
                <a href="#" class="text-black dark:text-white bg-purple-500 dark:bg-purple-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-200">Inspect Logs</a>
            </div>
        </div>

        <!-- Media Card 3 -->
        <div class="bg-red-400 dark:bg-red-700 p-6 shadow-2xl border-4 border-black dark:border-white transform rotate-3 hover:rotate-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Media 3" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">User Activity Log</h3>
            <p class="text-black dark:text-white text-sm mb-4">Detailed records of user interactions and system events across the platform.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Critical</span>
                <a href="#" class="text-black dark:text-white bg-green-500 dark:bg-green-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-green-600 dark:hover:bg-green-800 transition-colors duration-200">Review Incidents</a>
            </div>
        </div>

        <!-- Media Card 4 with Avatar -->
        <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-16 h-16 rounded-full object-cover border-2 border-black dark:border-white mr-4">
                <div>
                    <h3 class="text-2xl font-bold text-black dark:text-white uppercase">Team Collaboration</h3>
                    <p class="text-black dark:text-white text-sm">Updates from the development team.</p>
                </div>
            </div>
            <p class="text-black dark:text-white text-sm mb-4">Latest sprint review and upcoming feature discussions. Track progress.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-orange-300 dark:bg-orange-500 px-3 py-1 border-2 border-black dark:border-white">Update</span>
                <a href="#" class="text-black dark:text-white bg-yellow-500 dark:bg-yellow-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-800 transition-colors duration-200">Join Meeting</a>
            </div>
        </div>

        <!-- Media Card 5 - Chart Placeholder -->
        <div class="bg-orange-400 dark:bg-orange-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-y-6 hover:skew-y-0 transition-transform duration-300">
            <div class="w-full h-48 bg-gray-300 dark:bg-gray-600 flex items-center justify-center mb-4 border-2 border-black dark:border-white">
                <p class="text-black dark:text-white text-lg font-bold">Chart Placeholder</p>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Traffic Overview</h3>
            <p class="text-black dark:text-white text-sm mb-4">Visual representation of website traffic and user engagement.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-purple-300 dark:bg-purple-500 px-3 py-1 border-2 border-black dark:border-white">Metrics</span>
                <a href="#" class="text-black dark:text-white bg-blue-500 dark:bg-blue-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-blue-600 dark:hover:bg-blue-800 transition-colors duration-200">Full Report</a>
            </div>
        </div>

        <!-- Media Card 6 - Text Only -->
        <div class="bg-teal-400 dark:bg-teal-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -rotate-6 hover:rotate-0 transition-transform duration-300">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Security Alerts</h3>
            <p class="text-black dark:text-white text-sm mb-4">Immediate notifications on potential security breaches and vulnerabilities.</p>
            <ul class="list-disc list-inside mb-4 text-black dark:text-white text-sm">
                <li>Intrusion detected in server 1</li>
                <li>Unauthorized access attempt blocked</li>
                <li>Malware scan initiated</li>
            </ul>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Urgent</span>
                <a href="#" class="text-black dark:text-white bg-orange-500 dark:bg-orange-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200">Resolve</a>
            </div>
        </div>
    </div>
</div>

Composant Composants multimédias

Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.

Ouvrir l’aperçu

                <div class="p-4 lg:p-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-xl max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Alice Smith</p>
      <p class="text-gray-600 text-sm dark:text-gray-400">Posted on August 25, 2023</p>
    </div>
  </div>
  <div class="mb-4">
    <img class="rounded-lg object-cover w-full h-48 border-2 border-pink-500" src="https://picsum.photos/seed/social1/600/400" alt="Post Image">
  </div>
  <p class="text-gray-800 leading-relaxed mb-4 dark:text-gray-300">
    This is an example of a social media post content. Engaging and vibrant!
  </p>
  <div class="flex justify-between items-center text-gray-700 dark:text-gray-400">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
      </svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.113A14.732 14.732 0 0112 20c-4.97 0-9-3.582-9-8s4.03-8 9-8a9.986 9.986 0 014.196 1.113A14.732 14.732 0 0112 4c4.97 0 9 3.582 9 8z" />
      </svg>
      <span>45 Comments</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.938 9 14.595 9 15.25V17.586a2 2 0 01-2.298 1.995L5 19.258V7.762c0-1.04.283-2.042.857-2.914m14.091 2.914c.574.872.857 1.874.857 2.914v10.492l-2.702 1.351A3 3 0 0115 19.586V15.25c0-.655.118-1.312.316-1.908a2.001 2.001 0 002.005-2.005L17.5 9.25v-2.702a2 2 0 00-2-2H11.7S9.25 4 7.709 4c-1.54 0-3.09.958-3.09 3.154V9l-.708-.354a2 2 0 00-2 0L3 9.25v-1.5c0-2.206 2.94-4.75 6-4.75S15 4 15 6.75v.5l1 .5H17a2 2 0 012 2v.993M2.44 19.09V15c0-1.414-.917-2.73-2.185-2.995M22.56 19.09V15c0-1.414.917-2.73 2.185-2.995" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

Composant Composants multimédias

Composant multimédia complexe et réactif pour la consommation de contenu de blog, stylisé en mode sombre avec une palette de couleurs monochromatiques. Il comprend une image, un titre, une description et un avatar de l’auteur.

Ouvrir l’aperçu

                <div class="max-w-2xl mx-auto bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <img class="w-full h-48 rounded-lg object-cover mb-4" src="https://picsum.photos/800/400" alt="Media Content">
    <h2 class="text-2xl font-bold mb-2">Article Title</h2>
    <p class="text-gray-400 mb-4">This is a short description of the content that provides a brief overview of what the article is about.</p>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
        <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500">Published on January 1, 2023</p>
        </div>
    </div>
</div>

Composant multimédia Skeuomorphism

Composant multimédia inspiré du skeuomorphisme utilisant un schéma de couleurs monochromatiques et un niveau de complexité complexe, adapté à des fins de blog/contenu. Les fonctionnalités incluent la conception réactive et la prise en charge du thème sombre sans JavaScript.

Ouvrir l’aperçu

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-xl">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Featured Article Card -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 group">
      <img class="w-full h-64 object-cover" src="https://picsum.photos/800/600?random=1" alt="Featured Article Image">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Featured Article Title</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Published on <span class="font-semibold">October 26, 2023</span></p>
        <p class="text-gray-700 dark:text-gray-300 mt-4">This is a summary of the featured article. It gives a brief overview of the content to entice readers to click and learn more. The design mimics a physical object with subtle borders and shadow.</p>
        <div class="flex items-center mt-6">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-300">John Doe</span>
        </div>
        <a href="#" class="inline-block mt-6 text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>

    <!-- Recent Articles List -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Articles</h3>
      <ul>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 1</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A short description of the recent article.</p>
          </a>
        </li>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 2</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Another short description of a recent article.</p>
          </a>
        </li>
        <li class="py-3">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 3</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A final short description for the list.</p>
          </a>
        </li>
      </ul>
       <button class="mt-6 w-full px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">View All Articles</button>
    </div>

  </div>
</div>

Composant multimédia E-commerce Simple Neumorphism

Composant multimédia de style Neumorphisme avec des tons de terre, complexité simple, pour site de commerce électronique, avec un design réactif et une prise en charge du thème sombre. Utilise picsum.photos pour les images.

Ouvrir l’aperçu

                <div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
    <button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="text-center">
    <div class="text-lg font-medium text-black dark:text-white">Product Title</div>
    <p class="text-gray-500 dark:text-gray-400">$19.99</p>
  </div>
  <div class="flex justify-center">
    <button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
      Add to Cart
    </button>
  </div>
</div>

Composant Composants multimédias

Un composant multimédia réactif pour le commerce électronique avec Material Design et une palette de couleurs monochromatiques.

Ouvrir l’aperçu

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
    </div>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
        <button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
    </div>
</div>

Brutalisme Pastel Media Composante

Un composant médiatique simple et brutaliste avec une palette de couleurs pastel, conçu pour un blog. Réactif avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
  <div class="p-4">
    <div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
    <p class="text-gray-700 text-base dark:text-gray-300">
      This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
    </p>
    <div class="mt-4 flex items-center">
      <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
      <div class="text-sm">
        <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
        <p class="text-gray-600 dark:text-gray-400">Date</p>
      </div>
    </div>
  </div>
</div>

Un composant de style Neumorphism pour l’affichage multimédia avec un design réactif et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
    <div class="mb-4">
        <img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
    </div>
    <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
        <h2 class="text-lg font-semibold dark:text-white">User Name</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300 text-center">
        This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
    </p>
</div>

Glassmorphism Media Components Component

Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir l’aperçu

                ```html
<div class="dark:bg-gray-900">
  <section class="container mx-auto p-6">
    <div class="flex flex-col md:flex-row items-center">
      <div class="flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">Media Component</h1>
        <p class="mb-8 leading-relaxed text-gray-600 dark:text-gray-300">This is a responsive media component with glassmorphism style and dark theme support.</p>
      </div>
      <div class="w-full md:w-1/2">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="object-cover object-center h-full w-full" alt="hero" src="https://picsum.photos/720/600">
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4 mt-8">
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/720/400" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 1</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/721/401" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 2</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/722/402" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 3</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
    </div>
  </section>
</div>
```

Composant multimédia rétro

Un composant multimédia réactif avec un design rétro/vintage, prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300">
  <img class="w-full h-48 object-cover rounded-t-lg mb-4" src="https://picsum.photos/seed/retro/600/400" alt="Retro Image">
  <div class="text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-bold mb-2">Retro Media Title</h2>
    <p class="text-base mb-4">This is a description of the retro media component, evoking a sense of nostalgia with its vintage design and colors.</p>
    <div class="flex items-center text-sm">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
      <span>By John Doe</span>
      <span class="ml-auto">Posted on 1995-10-26</span>
    </div>
  </div>
</div>

Catégories

Composants multimédias