Paper_Print_Media_Card
Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border-2 border-gray-100 dark:border-gray-700">
<!-- Faint textured background to mimic paper -->
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-paper.png')] opacity-20 dark:opacity-5"></div>
<div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
<!-- Image Section -->
<div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-md overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/400/400?random=1" alt="Media thumbnail" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105">
</div>
<!-- Content Section -->
<div class="text-center sm:text-left flex-grow">
<h2 class="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-800 dark:text-pink-100 mb-2 leading-tight">
<span class="block">The Whispering Woods</span>
<span class="block text-base sm:text-lg text-gray-500 dark:text-purple-300 font-sans italic">An Enchanting Journey</span>
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
Dive into a world where ancient trees share their secrets and mystical creatures roam free. Join Elara on a quest to restore harmony to a forgotten realm.
</p>
<div class="flex items-center justify-center sm:justify-start text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
</svg>
<span>1h 45m</span>
<span class="mx-2">•</span>
<span>Fantasy, Adventure</span>
</div>
<div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-200 bg-pink-100 dark:bg-pink-700 dark:bg-opacity-20 hover:bg-pink-200 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 transition-all duration-200 text-sm font-semibold shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
<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" />
</svg>
Watch Now
</button>
<button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-purple-300 dark:border-purple-600 text-purple-700 dark:text-purple-200 bg-purple-100 dark:bg-purple-700 dark:bg-opacity-20 hover:bg-purple-200 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-500 transition-all duration-200 text-sm font-semibold shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
</svg>
Details
</button>
</div>
</div>
</div>
<!-- Decorative 'paper cut' edge -->
<div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-900 dark:to-transparent pointer-events-none">
<div class="h-full w-full relative overflow-hidden">
<div class="absolute inset-0 bg-[linear-gradient(to_right,transparent_1px,rgba(0,0,0,0.05)_1px,rgba(0,0,0,0.05)_2px,transparent_2px)] dark:bg-[linear-gradient(to_right,transparent_1px,rgba(255,255,255,0.02)_1px,rgba(255,255,255,0.02)_2px,transparent_2px)] bg-[length:10px_10px] transform -skew-y-1 -translate-y-px opacity-70"></div>
</div>
</div>
</div>
</div>Composants associés
Carte d’inscription immobilière
Une carte d’annonce immobilière complexe, inspirée du papier/de l’impression avec des tons bleus d’entreprise, conçue pour les plateformes d’annonces immobilières. Il propose une mise en page réactive, une prise en charge du mode sombre et de multiples détails sur une propriété.
Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.
Point culminant de la fonctionnalité de jeu
Une fonctionnalité de jeu réactive met en évidence un composant avec un design épuré et minimaliste mettant l’accent sur la typographie et un système de grille, en utilisant des neutres chauds et en prenant en charge le mode sombre. Comprend une grande image, un titre, une description et un bouton d’action.