Aller au composant de lien de contenu
Un composant Web qui fournit un lien pour passer au contenu principal, stylisé en Material Design avec une palette de couleurs pastel, adapté aux sites Web de commerce électronique. Il présente un design réactif avec prise en charge du thème sombre.
HTML Code
<nav class="bg-pastel-200 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
<div class="flex justify-between items-center">
<a href="#main-content" class="text-pastel-800 dark:text-white font-medium text-lg hover:text-pastel-600 dark:hover:text-gray-300 transition duration-300 ease-in-out">
Skip to Content
</a>
</div>
</nav>
<main id="main-content" class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-md mt-4">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to Our E-commerce Store</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-4">
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 1</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 2</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
<div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-lg">
<h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 3</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
<button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
</main>Composants associés
Aller au composant de lien de contenu
Un lien Skip to Content de style 3D visuellement attrayant qui aide les utilisateurs à contourner les menus de navigation sur une interface de réseau social. Le composant utilise une palette de couleurs complémentaires (bleu et orange) avec un effet 3D obtenu par des ombres et des transformations. Dispose d’un design réactif et d’un support de thème sombre. Le lien apparaît fixe en haut à gauche de la fenêtre d’affichage lorsqu’il est activé ou actif, ce qui le rend facilement accessible pour la navigation au clavier tout en restant discret lorsqu’il n’est pas utilisé.
Aller au lien de contenu
Un composant Skip to Content Link avec une conception 3D en niveaux de gris pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Pas de JavaScript.
SkipToContentLink
Passer à Composant de lien de contenu avec interface utilisateur en mode sombre, schéma de couleurs triadique et complexité simple pour le commerce électronique.