Zur Inhaltslink-Komponente springen
Eine Webkomponente, die einen Link zum Springen zum Hauptinhalt bereitstellt, im Material Design mit einem pastellfarbenen Farbschema, geeignet für E-Commerce-Websites. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen.
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>Verwandte Komponenten
Zur Inhaltslink-Komponente springen
Eine Retro-/Vintage-Linkkomponente "Zum Inhalt springen" in Pastellfarben, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und Unterstützung für Barrierefreiheit und Dunkelmodus bietet.
Zur Inhaltslink-Komponente springen
Ein visuell ansprechender Link "Zum Inhalt springen" im 3D-Stil, der Benutzern hilft, Navigationsmenüs auf einer Social-Media-Oberfläche zu umgehen. Die Komponente verwendet ein komplementäres Farbschema (Blau und Orange) mit einem 3D-Effekt, der durch Schatten und Transformationen erzielt wird. Mit responsivem Design und Unterstützung für dunkle Themen. Der Link wird im fokussierten oder aktiven Zustand oben links im Ansichtsfenster fixiert angezeigt, sodass er für die Tastaturnavigation leicht zugänglich ist, während er bei Nichtgebrauch unauffällig bleibt.
Zum Inhaltslink springen
Eine Komponente vom Typ "Zum Inhaltslink springen", die nach den Prinzipien des Materialdesigns, einem monochromatischen Farbschema und der Unterstützung des Dunkelmodus gestaltet ist. Es eignet sich für E-Commerce-Websites und wird mit Tailwind CSS ohne JavaScript erstellt.