Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de fuente de actividad

Un componente de alimentación de actividades con diseño de neumorfismo, combinación de colores en tonos tierra, diseño complejo, diseño receptivo y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 min-h-screen">

  <!-- Light Mode Neumorphism styles -->
  <style>
    .neumorphic-light {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    }

    .neumorphic-light-inset {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
    }
  </style>

  <!-- Dark Mode Neumorphism styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .neumorphic-dark {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #454f6a;
      }

      .dark .neumorphic-dark-inset {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: inset 8px 8px 15px #1a202c, inset -8px -8px 15px #454f6a;
      }
    }
  </style>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <!-- Left Sidebar (User Profile / Filters) -->
    <div class="md:col-span-1 p-6 neumorphic-light dark:neumorphic-dark">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-24 h-24 mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Blogger & Content Creator</p>
      </div>

      <div class="mt-8">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">All Activity</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comments</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Likes</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">New Posts</a></li>
        </ul>
      </div>
    </div>

    <!-- Main Activity Feed -->
    <div class="md:col-span-2 space-y-6">

      <!-- Activity Card Example 1 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-600 dark:text-gray-400">commented on</span> "Exploring the Wilds"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</span>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">"Great post! I really enjoyed reading about your adventure."</p>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Reply</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Like</button>
        </div>
      </div>

      <!-- Activity Card Example 2 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones <span class="font-normal text-gray-600 dark:text-gray-400">liked</span> "The Art of Minimalism"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</span>
          </div>
        </div>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Undo Like</button>
        </div>
      </div>

      <!-- Activity Card Example 3 (New Post) -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily Davis <span class="font-normal text-gray-600 dark:text-gray-400">published a new post</span> "My Journey in Photography"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">1 day ago</span>
          </div>
        </div>
        <div class="neumorphic-light dark:neumorphic-dark p-4 rounded-md mb-4">
            <img src="https://picsum.photos/seed/photography/400/200" alt="Post Image" class="rounded-md mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">My Journey in Photography</h4>
            <p class="text-gray-700 dark:text-gray-300 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Read Post</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comment</button>
        </div>
      </div>

    </div>

  </div>
</div>

Componente de la sección de comentarios

Un componente simple de la sección de comentarios diseñado con el estilo Material Design, utilizando un esquema de color monocromático, optimizado para interfaces de redes sociales y diseño receptivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
    </div>
</div>

Saltar al componente de enlace de contenido

Un componente de enlace Saltar al contenido diseñado con elementos skeuomórficos que se asemejan a un botón físico. El componente tendrá un esquema de color pastel, una complejidad moderada que incluye efectos de desplazamiento y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex justify-center">
    <a href="#content" class="relative flex items-center justify-center w-52 h-12 rounded-lg shadow-lg bg-pastel-bg-light dark:bg-pastel-bg-dark text-pastel-text-light dark:text-pastel-text-dark hover:bg-gradient-to-r hover:from-pastel-hover-start hover:to-pastel-hover-end transition duration-200 ease-in-out">
        <span class="absolute inset-0 rounded-lg border border-pastel-border-light dark:border-pastel-border-dark transform scale-110 hover:scale-100 transition duration-200 ease-in-out"></span>
        <span class="font-semibold z-10">Skip to Content</span>
    </a>
</div>

<style>
    .bg-pastel-bg-light {
        background-color: #f9e3e3;
    }
    .bg-pastel-bg-dark {
        background-color: #3c3c3c;
    }
    .text-pastel-text-light {
        color: #2d2d2d;
    }
    .text-pastel-text-dark {
        color: #f6f6f6;
    }
    .hover\:bg-gradient-to-r:hover {
        background: linear-gradient(90deg, #f9b0b0, #f6dbbd);
    }
    .hover\:from-pastel-hover-start:hover {
        background-color: #f9b0b0;
    }
    .hover\:to-pastel-hover-end:hover {
        background-color: #f6dbbd;
    }
    .border-pastel-border-light {
        border-color: #f17979;
    }
    .border-pastel-border-dark {
        border-color: #606060;
    }
</style>

<div id="content" class="p-5 mt-10">
    <h1 class="text-2xl font-bold dark:text-white">Welcome to My Portfolio</h1>
    <img src="https://picsum.photos/800/400" alt="Portfolio Image" class="mt-5 rounded-lg shadow-lg">
    <p class="mt-3 dark:text-gray-300">Here you'll find a selection of my work and projects showcasing my skills and expertise.</p>
</div>

Componente de la galería de productos

Componente de galería de productos receptivo con soporte para temas oscuros, estilo de diseño de materiales, combinación de colores de tonos tierra, complejidad simple, para fines de comercio electrónico.

Abrir Vista previa

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$29.99</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$39.50</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1">Short description of the product.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-100">$19.00</span>
          <button class="bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

Saltar al componente de enlace de contenido

Un componente de vínculo Saltar al contenido interactivo para un panel con un estilo de neumorfismo y un esquema de color de tonos tierra.

Abrir Vista previa

                <div class="flex justify-center mt-4">
    <a href="#content" class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white px-4 py-2 rounded-lg shadow-lg transition ease-in-out duration-300 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-300 dark:focus:ring-offset-gray-900">
        Skip to Content
    </a>
</div>

Panel de control de comercio electrónico

Un componente de panel de control de comercio electrónico en modo oscuro con un diseño simple para la visualización de datos y paneles de control.

Abrir Vista previa

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>E-commerce Dashboard</title>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto p-6">
        <h1 class="text-xl font-bold mb-6">E-commerce Dashboard</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Sales Overview</h2>
                <img src="https://picsum.photos/400/200?random=1" alt="Sales Overview" class="w-full h-32 object-cover rounded-md">
                <p class="mt-2">Total Sales: $10,000</p>
                <p class="mt-1">Orders: 150</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">User Insights</h2>
                <img src="https://picsum.photos/400/200?random=2" alt="User Insights" class="w-full h-32 object-cover rounded-md">
                <p class="mt-2">Total Users: 500</p>
                <p class="mt-1">Active Users: 300</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Recent Orders</h2>
                <ul class="list-disc list-inside mt-2">
                    <li>Order #1 - $50</li>
                    <li>Order #2 - $30</li>
                    <li>Order #3 - $20</li>
                </ul>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                <h2 class="font-semibold text-lg">Profile Overview</h2>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
                    <div class="ml-3">
                        <p class="font-semibold">John Doe</p>
                        <p>[email protected]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Componente de contenedor

Un componente de contenedor diseñado en un estilo brutalista para el comercio electrónico, con un diseño responsivo con soporte para temas oscuros, utilizando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
    <div class="flex flex-wrap gap-4">
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <footer class="text-center mt-4 text-gray-400">
        <p>© 2023 E-commerce Store</p>
    </footer>
</div>

Componente Mensajes de éxito

Un componente de mensajes de éxito receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, ideal para mostrar el trabajo en un portafolio.

Abrir Vista previa

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>

Componente de botones para compartir en redes sociales

Un componente skeuomórfico de botones para compartir en redes sociales diseñado para sitios web de comercio electrónico, con un esquema de color en escala de grises y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

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.

Abrir Vista previa

                <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>

1 ... 135 136 137 138 139 ... 242

Categorías

Todos los componentes