Componentes de búsqueda

Categorías

Componentes Componentes de diseño

Componentes de diseño

Componentes que estructuran el diseño general de la página

Componente Componentes de diseño

Un componente de diseño diseñado en un estilo skeuomórfico que imita a sus homólogos del mundo real, con elementos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
    </header>
    <main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
            </div>
        </div>
    </main>
    <footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
        <p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
    </footer>
</div>

Componente de diseño de modo oscuro

Un componente de diseño responsivo con soporte de modo oscuro mediante Tailwind CSS. Cuenta con un encabezado, un área de contenido y un pie de página simples. El modo oscuro se maneja mediante el prefijo 'dark:' en las clases de Tailwind.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4">
      <h1 class="text-xl font-bold">My Website</h1>
    </div>
  </header>
  <main class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
      <h2 class="text-lg font-semibold mb-4">Welcome</h2>
      <p>This is a basic layout component with dark mode.</p>
    </div>
  </main>
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center">
      <p>&copy; 2023 My Website</p>
    </div>
  </footer>
</div>

Componentes de diseño Componente 40

Un componente de diseño responsivo que presenta microinteracciones con animaciones atractivas. Incluye una estructura de tarjeta con interacciones del usuario, como efectos de desplazamiento, escala y ajustes de tema oscuro.

Abrir Vista previa

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="p-4">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out">User Profile</h2>
            <div class="flex items-center mt-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 hover:scale-110 transition-transform duration-300 ease-in-out">
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
                </div>
            </div>
        </div>
        <div class="p-4">
            <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md hover:scale-105 transition-transform duration-300 ease-in-out">
        </div>
        <div class="p-4">
            <p class="text-gray-700 dark:text-gray-300">This component features engaging microinteractions that enhance user experience by providing visual feedback on actions.</p>
    </div>
        <div class="flex justify-end p-4">
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition-all duration-300 ease-in-out">Follow</button>
        </div>
    </div>
</div>