Composant de mise en page de grille de divertissement
Une grille épurée et minimaliste inspirée de la typographie suisse/internationale pour les plateformes de divertissement et de médias. Dispose d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
<div class="container mx-auto">
<div class="mb-8 text-center">
<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
Featured Entertainment
</h2>
<p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
Explore our curated selection of movies, shows, and more.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Item 1 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
<a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
<a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
<a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 5 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 6 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
<a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Skeuomorphism Disposition en grille vibrante
Composant de mise en page de grille réactif avec prise en charge du mode sombre, conception Skeuomorphism, Couleurs vives, Complexité modérée, adapté aux portefeuilles.
Composant de disposition de grille Glassmorphism
Composant de mise en page de grille Glassmorphism avec prise en charge du thème réactif et sombre
Disposition de la grille de conception matérielle
Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.