Vai al componente Collegamento contenuto
Un componente web che fornisce un link per passare al contenuto principale, stilizzato in Material Design con una combinazione di colori pastello, adatto per siti di e-commerce. Presenta un design reattivo con supporto per il tema scuro.
Codice HTML
<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>Componenti correlati
Vai al componente Collegamento contenuto
Un componente di collegamento Salta al contenuto reattivo per una dashboard con uno stile di neumorfismo e una combinazione di colori dei toni della Terra.
Vai al collegamento al contenuto
Un componente di collegamento reattivo "Salta al contenuto" con stile Glassmorphism, che implementa una combinazione di colori complementare, una complessità moderata e il supporto della modalità oscura adatto per siti Web aziendali/aziendali. Questo componente è implementato esclusivamente in HTML con le classi CSS Tailwind, che non richiedono JavaScript.
Vai al collegamento al contenuto
Passa al collegamento al contenuto Componente allineato ai principi di Material Design, con design reattivo, supporto per la modalità scura e una semplice combinazione di colori monocromatici per le applicazioni di social media.