Catégories

Composants Composants multimédias

Composants multimédias

Composants pour l’affichage de différents types de contenu multimédia

Composant Composants multimédias

Un composant multimédia conçu dans le style brutalisme, présentant une mise en page audacieuse avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>

Composants multimédias Composant avec Glassmorphism

Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400"> pêøvêl</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Composant multimédia Glassmorphic

Un composant de carte multimédia réactif avec un design glassmorphism (effet verre givré) construit avec Tailwind CSS. Comprend un espace réservé à l’image (de picsum.photos) avec une icône de lecture de survol, du contenu textuel, une section d’auteur avec un avatar (à partir de randomuser.me) et des boutons d’action. Le composant prend en charge le mode sombre à l’aide des variantes CSS 'dark :' de Tailwind et est réactif sur différentes tailles d’écran. Aucun JavaScript n’est requis. Pour un effet visuel optimal, placez ce composant sur un fond contrasté. La fonctionnalité du mode sombre suppose une configuration CSS Tailwind appropriée (par exemple, 'darkMode : « class"' dans votre tailwind.config.js).

Ouvrir l’aperçu

                <div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
  <!-- Image -->
  <div class="relative">
    <img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
    <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
      <svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="p-5 sm:p-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
      Glassmorphic Media Showcase
    </h2>
    <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
      Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
    </p>

    <!-- Author/Meta Info -->
    <div class="flex items-center space-x-3 mt-4">
      <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
      <div>
        <p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-indigo-600 hover:bg-indigo-700 text-white 
                     dark:bg-indigo-500 dark:hover:bg-indigo-600 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        View Details
      </button>
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-white/50 hover:bg-white/70 text-slate-700 
                     dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200 
                     border border-white/60 dark:border-slate-600/60 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        Bookmark
      </button>
    </div>
  </div>
</div>

Composant Composants multimédias

Un composant multimédia réactif inspiré des styles de design rétro/vintage, avec une esthétique nostalgique des années 80/90. Il prend en charge le thème sombre avec Tailwind CSS et comprend des images et des avatars de remplacement.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

Composant Composants multimédias

Un composant multimédia réactif avec des micro-interactions avec des animations attrayantes, conçu avec Tailwind CSS. Il prend en charge le thème sombre et inclut des images et des avatars de substitution.

Ouvrir l’aperçu

                <div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

Composant Composants multimédias

Un composant multimédia conçu avec le style skeuomorphism à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

Composants multimédias Composante 39

Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-bold">John Doe</h2>
            <p class="text-gray-400">Posted 2 hours ago</p>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
    <h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
    <p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
    <div class="mt-4 flex justify-between">
        <button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
    </div>
</div>

Composants multimédias Composante 2

Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>