Catégories

Cartes

Conteneurs rectangulaires avec informations connexes

Composant Glassmorphism Cards

Composants de cartes Glassmorphism aux couleurs vives. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="p-10 dark:bg-gray-900 bg-gray-100">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/600/400" alt="Card Image">
        <div class="p-6">
          <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-purple-500 text-white rounded-full text-xs font-semibold uppercase">New</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Blog Post Title</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.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">Aug 18, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/nature/600/400" alt="Card Image">
        <div class="p-6">
           <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-pink-500 text-white rounded-full text-xs font-semibold uppercase">Trending</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Another Blog Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.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">Aug 17, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/tech/600/400" alt="Card Image">
        <div class="p-6">
             <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-yellow-500 text-white rounded-full text-xs font-semibold uppercase">Featured</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Yet Another Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.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">Aug 16, 2023</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de carte brutaliste

Un composant de carte brutaliste avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
  <img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
  <p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <span class="text-black dark:text-white">John Doe</span>
  </div>
  <button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>

Composant de cartes neumorphes

Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
        </div>
        <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="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
        </div>
        <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/women/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
        </div>
        <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/2.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
</div>

Inspiré par le skeuomorphisme, le composant de carte suivant est entièrement réactif avec la prise en charge du thème sombre. Pour le mode sombre, la prise en charge CSS est suffisante. Aucun JavaScript n’est nécessaire.

Ouvrir l’aperçu

                <div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- Card 1 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</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/32.jpg" alt="Avatar of random user">
        <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">Developer</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</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/44.jpg" alt="Avatar of random user">
        <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="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</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/47.jpg" alt="Avatar of random user">
        <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">Project Manager</p>
        </div>
      </div>
    </div>
  </div>

</div>

<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>

Composant de la carte Skeuomorphism

Un composant de carte réactif de style Skeuomorphism avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images et des avatars de substitution.

Ouvrir l’aperçu

                <div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
    <div class="absolute bottom-0 right-0 -mb-4 mr-4">
      <img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    </div>
  </div>
  <div class="mt-6">
    <h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
    <p class="text-gray-700 dark:text-gray-300">
      This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
    </p>
  </div>
  <div class="mt-4 flex justify-between items-center">
    <span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
      Read More
    </button>
  </div>
</div>

Carte de conception matérielle

Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

Catégories

Cartes

Composant Glassmorphism Cards

Composant de carte brutaliste

Composant de cartes neumorphes

Composant Cartes Skeuomorphic

Composant de la carte Skeuomorphism

Carte de conception matérielle