Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de la sección de comentarios

Una sección de comentarios diseñada con skeuomorfismo, con tonos tierra y soporte para temas oscuros, adaptada a sitios web de comercio electrónico.

Abrir Vista previa

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Customer Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This product exceeded my expectations! Highly recommend.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">The quality is fantastic! Will buy again.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Fast shipping and great customer service!</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">3 days ago</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-2 border rounded-lg bg-gray-100 dark:bg-gray-700 border-brown-300 dark:border-brown-600 focus:outline-none focus:ring focus:ring-brown-500 dark:focus:ring-brown-400" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 px-4 py-2 bg-brown-600 text-white rounded-lg hover:bg-brown-500 focus:outline-none focus:ring focus:ring-brown-500 dark:bg-brown-500 dark:hover:bg-brown-400 dark:focus:ring-brown-400">Submit</button>
    </div>
</div>

Componente de Indicadores de Progreso

Un componente de indicadores de progreso de estilo de diseño 3D con esquema de color en escala de grises para el consumo de contenido del blog, con diseño receptivo y soporte de modo oscuro.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

Componente funcional de comercio electrónico

Componente de comercio electrónico de diseño plano minimalista con esquema de color triádico y soporte de modo oscuro receptivo.

Abrir Vista previa

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our E-commerce Store</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$99.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/301/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">Find out more about this amazing product!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$149.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/302/200" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Best Seller</h2>
                <p class="text-gray-600 dark:text-gray-300 mt-2">This product is a customer favorite!</p>
                <div class="mt-4">
                    <span class="text-xl font-bold text-gray-800 dark:text-white">$79.99</span>
                    <button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white">Customer Reviews</h3>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-4">
                <p class="text-gray-800 dark:text-white">John Doe</p>
                <p class="text-gray-600 dark:text-gray-300">"Excellent products! Fast shipping and great service. Highly recommend!"</p>
            </div>
        </div>
    </div>
</div>

Componente Botones

Botones de estilo Material Design con un esquema de color en escala de grises para fines de cartera, con diseño receptivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <h1 class="mb-8 text-3xl font-bold text-gray-800 dark:text-gray-200">Portfolio Showcase</h1>
  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/200" alt="Project 1" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 1 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/201" alt="Project 2" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 2</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 2 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
    <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/300/202" alt="Project 3" class="w-full h-48 object-cover rounded-md mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project 3</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Description of project 3 goes here.</p>
      <a href="#" class="inline-block px-6 py-2 text-sm font-medium text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Details</a>
    </div>
  </div>
</div>

Componente Pestañas

Un componente de pestañas responsivas con microinteracciones para sitios web comerciales/corporativos, con colores complementarios y soporte para modo oscuro.

Abrir Vista previa

                <div class="max-w-4xl mx-auto my-10 p-5">
  <div class="border-b border-gray-300 dark:border-gray-700">
    <nav class="flex space-x-4" aria-label="Tabs">
      <button class="tab-button active dark:bg-gray-800 dark:text-white bg-blue-500 text-white rounded-lg px-4 py-2 transition duration-200 ease-in-out" aria-current="page">Tab 1</button>
      <button class="tab-button hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200 ease-in-out rounded-lg px-4 py-2">Tab 2</button>
      <button class="tab-button hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200 ease-in-out rounded-lg px-4 py-2">Tab 3</button>
    </nav>
  </div>

  <div class="tab-content mt-4 p-5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
    <div id="tab-1" class="content active">
      <h2 class="text-xl font-semibold">Content for Tab 1</h2>
      <p>This tab contains information relevant to the first topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
    <div id="tab-2" class="content hidden">
      <h2 class="text-xl font-semibold">Content for Tab 2</h2>
      <p>This tab contains information relevant to the second topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
    <div id="tab-3" class="content hidden">
      <h2 class="text-xl font-semibold">Content for Tab 3</h2>
      <p>This tab contains information relevant to the third topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
  </div>
</div>

<style>
  .tab-button.active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .tab-button:hover {
    transform: scale(1.05);
  }

  .content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .content.active {
    opacity: 1;
    transform: translateY(0);
  }

  .content.hidden {
    display: none;
  }
</style>

Botones para compartir en redes sociales

Botones para compartir en redes sociales con estilo de neumorfismo, combinación de colores monocromática y complejidad simple para sitios web comerciales/corporativos. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS. Utiliza sombras sutiles para el efecto neumórfico.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4 p-6 rounded-xl shadow-inner bg-gray-300 dark:bg-gray-700">

    <!-- Facebook Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
      <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.299c-1.213 0-1.58.756-1.58 1.536V12h3.06l-.49 3.03h-2.572v7.019C18.368 21.083 22 16.951 22 12z" clip-rule="evenodd" />
      </svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
       <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.509 4.079 4.079 0 01-1.852-.514c0 .021 0 .042 0 .063a4.186 4.186 0 003.303 4.102 4.23 4.23 0 01-1.89.072 4.165 4.165 0 003.823 2.899 8.345 8.345 0 01-5.139 1.77c-.335 0-.668-.023-.996-.069a11.7 11.7 0 006.29 1.84" />
      </svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
      <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
      </svg>
    </a>

    <!-- Email Button -->
     <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
       <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M.05 3.5c0-.82.68-1.5 1.5-1.5h21c.82 0 1.5.68 1.5 1.5v17c0 .82-.68 1.5-1.5 1.5h-21c-.82 0-1.5-.68-1.5-1.5V3.5zm1.5 1.5v.91l10.06 6.55L22.55 5.9V5h-21zm0 2.09l9.18 6.04.77.5c.15.1.37.1.52 0l.77-.5 9.18-6.04V19h-21V7.09z"/>
       </svg>
    </a>

  </div>
</div>

Componente Componentes de diseño

Un componente web responsivo diseñado con un estilo esqueuomórfico, con un esquema de color monocromático para sitios web comerciales / corporativos. Incluye elementos interactivos para una interfaz enriquecida y admite el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
  <h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Company Overview</h2>
      <img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
      <p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
    </div>
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Team Members</h2>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
        <p>John Doe - CEO</p>
      </div>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
        <p>Jane Smith - CTO</p>
      </div>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
    </div>
  </div>
  <div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-xl font-semibold">Latest Reports</h2>
    <ul class="list-disc pl-5">
      <li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
    </ul>
  </div>
</div>

Componente Paneles

Un componente de paneles de control receptivo para aplicaciones de redes sociales con microinteracciones y un esquema de color triádico, construido con Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
            </div>
        </div>
        <div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
            </div>
        </div>
        <div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
            </div>
        </div>
    </div>
</div>

Componente de navegación de la barra lateral

Componente de navegación de barra lateral receptivo con soporte para modo oscuro. Diseño minimalista/plano, combinación de colores monocromática, interfaz compleja para carteras. Utiliza Tailwind CSS, picsum.photos y randomuser.me. Sin JavaScript.

Abrir Vista previa

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-lg">
    <div class="p-4">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
      <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
    </nav>

    <!-- Profile Section -->
    <div class="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (responsive - adjust margin-left on larger screens) -->
  <div class="flex-1 p-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to my Portfolio</h2>

    <!-- Project Grid (Example) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image">
        <div class="p-4">
          <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Project Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>

    </div>

  </div>

</div>

Infografía retro

Un componente infográfico retro/vintage simple y receptivo para portafolios con soporte para modo oscuro. Utiliza una combinación de colores complementaria y elementos mínimos.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 md:p-12 font-sans">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold text-center mb-8">My Infographic</h2>
    
    <div class="flex flex-wrap -mx-4">
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Alpha</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Alpha and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Beta</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Beta and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">Project Gamma</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Gamma and its key features.</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar of user">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

1 ... 122 123 124 125 126 ... 242

Categorías

Todos los componentes