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
Skeuomorphic_Grid_Layout_Business
Un composant de mise en page de grille complexe et réactif pour les sites Web d’entreprise, doté d’un style de conception skeuomorphe avec des couleurs neutres chaudes et une prise en charge du mode sombre. Les éléments imitent les objets du monde réel avec de la profondeur et des textures subtiles.
Composant de mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Mise en page de réservation de la grille dégradée
Un composant de mise en page de grille complexe et réactif pour les systèmes de réservation, avec des dégradés de couleurs triadiques, des transitions fluides et la prise en charge du mode sombre. Conçu avec plusieurs éléments interactifs.