Volver al principio Componente de botón
Un simple botón Volver al principio diseñado en un estilo brutalista utilizando Tailwind CSS, adecuado para un sitio web de portafolio. Cuenta con un esquema de color en escala de grises y soporte para temas oscuros.
Código HTML
<div class="fixed bottom-5 right-5 z-50">
<a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
⬆️
</a>
</div>
<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
<div class="container mx-auto p-5">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
<p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo para sitios de comercio electrónico, con un diseño monocromático en blanco y negro con un color de acento brillante y una microinteracción atractiva al pasar el mouse. Incluye soporte para modo oscuro.
Brutalismo Volver al botón de inicio
Volver al principio Componente de botón con estilo Brutalismo, combinación de colores triádica y complejidad compleja. Diseño responsivo con soporte para temas oscuros. Sin JavaScript.
Botón Volver al principio - Diseño 3D
Un botón Volver al principio con un diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.