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.
HTML Code
<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12 items-center">
<!-- Main Feature Card -->
<div class="md:col-span-1 lg:col-span-2 bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
<img src="https://picsum.photos/1200/600?random=1" alt="Epic Game Scene" class="w-full h-60 sm:h-80 md:h-96 object-cover object-center" loading="lazy">
<div class="p-6 sm:p-8 lg:p-10">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight tracking-tight mb-4 text-stone-900 dark:text-stone-50">
Immersive Worlds. Unforgettable Adventures.
</h2>
<p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 lg:mb-8 leading-relaxed">
Dive into breathtaking landscapes, embark on perilous quests, and redefine your gaming experience with unparalleled graphics and captivating storylines.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-semibold rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition duration-200 ease-in-out dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-400 dark:focus:ring-offset-stone-900">
Explore Games
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Side Feature Cards Wrapper -->
<div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6 md:gap-8">
<!-- Smaller Feature Card 1 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
<img src="https://picsum.photos/600/300?random=2" alt="Multiplayer" class="w-full h-36 object-cover object-center" loading="lazy">
<div class="p-5">
<h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
Connect Global Gamers
</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
Join millions worldwide in competitive and cooperative play. Build alliances, conquer rivals.
</p>
</div>
</div>
<!-- Smaller Feature Card 2 -->
<div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
<img src="https://picsum.photos/600/300?random=3" alt="Exclusive Content" class="w-full h-36 object-cover object-center" loading="lazy">
<div class="p-5">
<h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
Exclusive Content Unlocked
</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
Access unique in-game items, early betas, and member-only events. Enhance your journey.
</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
Tableau de bord des composants fonctionnels
Un composant de tableau de bord réactif conçu selon les principes de Material Design et une palette de couleurs monochromatiques. Il propose des mises en page basées sur une grille, des éléments interactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.