Componentes de búsqueda

Categorías

Componentes Diseño de cuadrícula

Diseño de cuadrícula

Disposición de contenidos basada en un sistema de cuadrícula

Componente de diseño de cuadrícula

Un componente de diseño de cuadrícula responsivo que sigue los principios de Material Design, con efectos de sombra y compatibilidad con el modo oscuro, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

Componente de diseño de cuadrícula Glassmorphism

Componente de diseño de cuadrícula de Glassmorphism con soporte de tema responsivo y oscuro

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Glassmorphism Grid Layout</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

             <!-- Card 4 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 4</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <!-- Card 5 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 5</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
                </div>
            </div>

            <!-- Card 6 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 6</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Componente de diseño de cuadrícula de skeuomorfismo

Componente de diseño de cuadrícula de skeuomorfismo con efectos responsivos y compatibilidad con temas oscuros

Abrir Vista previa

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example of a card with a skeuomorphic design approach, featuring gradients and shadows to mimic real-world textures.</p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Learn More</button>
    </div>

    <!-- Card 2 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Interactive Element</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Elements are designed to feel tangible, with hover effects that provide visual feedback, simulating physical interaction.</p>
      <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Details</button>
    </div>

    <!-- Card 3 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Dark Mode Ready</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">This component includes full support for dark mode, with colors and shadows adjusting seamlessly for a comfortable viewing experience.</p>
      <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Explore Options</button>
    </div>

        <!-- Card 4 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/picsum/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Image Integration</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Images are integrated with subtle borders and shadows to enhance the skeuomorphic feel, blending them naturally into the design.</p>
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Gallery</button>
    </div>

     <!-- Card 5 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Responsive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">The grid layout is fully responsive, adapting to different screen sizes while maintaining the skeuomorphic integrity of the design.</p>
      <button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Discover More</button>
    </div>

     <!-- Card 6 -->
    <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
      <div class="flex justify-center items-center mb-4">
        <img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/another/400/300" alt="Placeholder image">
      </div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customizable</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-4">Built with Tailwind CSS, this component is easily customizable, allowing for adjustments to colors, spacing, and other design elements.</p>
      <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Customize Now</button>
    </div>
  </div>
</div>

Diseño de materiales Diseño de cuadrícula

Un componente de diseño de cuadrícula receptivo con estilo Material Design, que incluye efectos de sombra y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
      </div>
    </div>
     <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
      </div>
    </div>
  </div>
</div>

Componente de diseño de cuadrícula

Un componente de diseño de cuadrícula minimalista con un diseño simple y limpio con efectos receptivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición y avatares de picsum.photos y randomuser.me.

Abrir Vista previa

                <div class="container mx-auto p-4">
    <h2 class="text-center text-2xl font-bold mb-4">Minimalist Grid Layout</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/151" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/152" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/153" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 4</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/154" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 5</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/155" alt="Placeholder Image" class="rounded mb-2">
            <h3 class="text-lg font-semibold">Card Title 6</h3>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the card content. It is concise and informative.</p>
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mt-2">
        </div>
    </div>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-700 { color: #edf2f7; }
    }
</style>