Composants Composants fonctionnels Point culminant de la fonctionnalité de jeu

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.

Aperçu

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

Ouvrir

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.

Ouvrir

Composante fonctionnelle des soins de santé

Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.

Ouvrir