Caratteristiche di gioco in evidenza
Una funzione di gioco reattiva evidenzia il componente con un design pulito e minimalista che enfatizza la tipografia e un sistema a griglia, utilizzando neutri caldi e supportando la modalità oscura. Presenta un'immagine di grandi dimensioni, un titolo, una descrizione e un pulsante di azione.
Codice HTML
<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>Componenti correlati
Controlli del lettore musicale Glassmorphic
Un componente di controllo del lettore musicale glassmorphic con toni seppia/marrone, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura. È reattivo, supporta la modalità oscura ed è adatto per lo streaming musicale e le piattaforme audio.
Scheda Prodotto E-commerce con Microinterazioni
Una semplice scheda prodotto per l'e-commerce con combinazione di colori triadica ed elementi di microinterazione da aggiungere al carrello e gradire, con reattività e supporto per la modalità scura.
Componenti funzionali Componente
Componente del dashboard con componenti funzionali che utilizzano i principi di Material Design, una combinazione di colori analoga e una complessità moderata. Il componente include il design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.