Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Visor 360

Un componente de visor de 360 grados con diseño de cristal, combinación de colores monocromática y complejidad moderada. Está diseñado para fines de blog/contenido, es responsivo y admite el modo oscuro usando Tailwind CSS. No se incluye JavaScript, solo HTML con clases Tailwind. Utiliza picsum.photos para las imágenes.

Abrir Vista previa

                
<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
      <p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
    </div>

    <div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
      <!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
      <img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
    </div>

    <div class="flex justify-center space-x-2 mb-6">
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300 text-sm">
      <p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
    </div>
  </div>
</div>

Componente de mensajes de alerta

Este componente es un mensaje de alerta con un diseño minimalista/plano, una combinación de colores en tonos tierra y un diseño complejo. Está diseñado para interfaces de redes sociales y es responsivo con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye múltiples elementos interactivos.

Abrir Vista previa

                
<div class="space-y-4 p-4 max-w-md mx-auto">

  <!-- Success Alert -->
  <div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success! Your post has been shared.</div>
      <div class="text-sm">You've reached 120 new people.</div>
    </div>
    <button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning: Some images failed to upload.</div>
      <div class="text-sm">Please check your network connection.</div>
    </div>
    <button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Error Alert with Avatar -->
  <div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
    <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <div class="font-bold">Error: Message delivery failed.</div>
      <div class="text-sm">User

Componente de pestañas de neumorfismo

Un componente de pestañas neumórficas para interfaces de usuario de paneles, con un esquema de color en escala de grises, diseño receptivo y compatibilidad con temas oscuros que usan solo HTML y Tailwind CSS.

Abrir Vista previa

                <div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <div class="flex space-x-4 mb-6">
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Overview
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium 
                     bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Analytics
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Reports
      </button>
    </div>

    <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <!-- Content for the active tab -->
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
        </div>
      </div>
    </div>

  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
    }
    .shadow-neumorphic-inset-light {
      box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
    }
  </style>
</div>

Componente de mensajes de alerta

Un componente de mensaje de alerta de estilo retro / vintage para sitios web comerciales / corporativos, con tonos tierra y diseño receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="max-w-md mx-auto p-4">
  </div>
  
  <div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
    <div class="flex items-center space-x-3">
      <div class="text-amber-600 dark:text-amber-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
      </div>
      <div>
        <h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
        <p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
      <button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
      <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
    </div>
  </div>
  
  <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
    <div class="flex items-center space-x-3">
      <div class="text-green-700 dark:text-green-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
        <p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
    </div>
  </div>

  <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
    <div class="flex items-center space-x-3">
      <div class="text-red-700 dark:text-red-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
        <p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
    </div>
  </div>

  <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
    <div class="flex items-center space-x-3">
      <div class="text-blue-700 dark:text-blue-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
        <p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</button>
    </div>
  </div>
</div>

Componente Mensajes de éxito

Un componente de mensajes de éxito de diseño minimalista / plano para redes sociales con colores pastel claros y un diseño responsivo complejo.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 space-y-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100 leading-tight">
      <span class="block">Congratulations!</span>
      <span class="block text-purple-500 dark:text-purple-400 mt-2">Your Post is Live!</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Left Section: Post Preview -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-100 dark:border-gray-600">
        <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4">Your Latest Creation</h3>
        <div class="relative rounded-lg overflow-hidden mb-4 aspect-video shadow-lg ring-4 ring-purple-300 dark:ring-purple-600">
          <img src="https://picsum.photos/800/450?random=1" alt="Post Image" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-4 flex items-end">
            <p class="text-white text-lg font-semibold">"Exploring new horizons and pushing boundaries."</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-pink-300 dark:border-pink-500">
          <p class="text-gray-600 dark:text-gray-300 font-medium">@CreativeExplorer</p>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span><i class="fas fa-heart text-red-400"></i> 1.2K Likes</span>
          <span><i class="fas fa-comment text-blue-400"></i> 89 Comments</span>
          <span><i class="fas fa-share-alt text-green-400"></i> 20 Shares</span>
        </div>
      </div>
      
      <!-- Right Section: Next Steps & Sharing -->
      <div class="space-y-6">
        <!-- Metrics Card -->
        <div class="bg-purple-50 dark:bg-purple-900 border border-purple-200 dark:border-purple-700 rounded-lg p-6 shadow-md">
          <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-4">Performance Snapshot</h3>
          <div class="grid grid-cols-2 gap-4 text-center">
            <div>
              <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-300">+15%</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">Engagement Rate</p>
            </div>
            <div>
              <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-300">+300</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">New Followers</p>
            </div>
          </div>
        </div>
        
        <!-- Call to Actions -->
        <div class="bg-pink-50 dark:bg-pink-900 border border-pink-200 dark:border-pink-700 rounded-lg p-6 shadow-md space-y-4">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-pink-200 mb-4">What's Next?</h3>
          <button class="w-full bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-3 px-6 rounded-full text-lg shadow-lg hover:from-purple-500 hover:to-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-share-alt mr-2"></i> Share This Post
          </button>
          <button class="w-full bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-300 font-bold py-3 px-6 rounded-full text-lg shadow-lg border border-purple-300 dark:border-purple-600 hover:bg-purple-50 dark:hover:bg-gray-600 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-chart-line mr-2"></i> View Analytics
          </button>
          <button class="w-full text-gray-600 dark:text-gray-300 bg-transparent border border-gray-300 dark:border-gray-600 font-bold py-3 px-6 rounded-full text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-plus mr-2"></i> Create Another Post
          </button>
        </div>
      </div>
    </div>
    
    <!-- Footer Message -->
    <p class="text-center text-gray-500 dark:text-gray-400 text-md mt-8">

Componente de notificaciones

Un componente de notificaciones receptivo con diseño 3D, diseño simple en escala de grises y soporte de tema oscuro, adecuado para sitios web comerciales.

Abrir Vista previa

                <div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
  <div class="relative z-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente de componentes de visualización de datos

Un componente de visualización de datos retro-vintage para redes sociales, con un esquema de color complementario y una complejidad moderada. Es responsivo y admite el modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="p-8 bg-gradient-to-br from-purple-700 to-indigo-900 min-h-screen dark:from-gray-900 dark:to-black font-mono">
  <div class="max-w-4xl mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex">
    <div class="md:flex-shrink-0 p-6 md:w-1/3 bg-purple-800 dark:bg-gray-900 text-white flex flex-col justify-between">
      <div>
        <h2 class="text-3xl font-bold mb-4 text-yellow-300 dark:text-cyan-400">Activity Monitor</h2>
        <p class="text-purple-200 dark:text-gray-400 mb-6">Your social media pulse, vintage style.</p>
        <div class="mb-4">
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Followers Gained</p>
          <p class="text-4xl">1,234</p>
        </div>
        <div>
          <p class="text-xl font-semibold text-yellow-300 dark:text-cyan-400">Likes This Week</p>
          <p class="text-4xl">5,678</p>
        </div>
      </div>
      <div class="mt-8">
        <div class="w-16 h-16 rounded-full overflow-hidden mx-auto border-4 border-yellow-300 dark:border-cyan-400">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <p class="text-center text-sm mt-2 text-purple-300 dark:text-gray-400">Logged in as @RetroUser</p>
      </div>
    </div>

    <div class="p-6 md:w-2/3 flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-gray-200">Engagement Overview</h3>
        
        <!-- Graph Placeholder - Simplified for HTML Only -->
        <div class="bg-purple-200 dark:bg-gray-700 rounded-lg p-4 mb-6 relative">
          <div class="h-48 w-full bg-gradient-to-t from-red-600 to-pink-500 dark:from-red-800 dark:to-pink-700 rounded-md relative overflow-hidden">
            <div class="absolute bottom-0 left-0 right-0 h-1/4 bg-red-700 opacity-75 animate-pulse"></div>
            <div class="absolute bottom-0 right-1/4 w-1/3 h-1/2 bg-yellow-400 opacity-75 animate-pulse" style="animation-delay: 0.5s;"></div>
            <div class="absolute bottom-0 left-1/2 w-1/4 h-3/4 bg-green-400 opacity-75 animate-pulse" style="animation-delay: 1s;"></div>
            <div class="absolute bottom-0 w-1/6 h-full bg-blue-400 opacity-75 animate-pulse" style="animation-delay: 1.5s;"></div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 text-center mt-2">Activity Trend (Simulated)</p>
        </div>

        <div class="grid grid-cols-2 gap-4 text-center">
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Posts</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">87</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg">
            <p class="text-lg font-semibold text-purple-600 dark:text-gray-300">Shares</p>
            <p class="text-3xl text-purple-800 dark:text-gray-100">321</p>
          </div>
        </div>
      </div>
      
      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400 text-center">
        <p>&copy; 2023 Retro Social Analytics. All rights reserved.</p>
      </div>
    </div>
  </div>
</div>

Componente de diseño de cuadrícula de neumorfismo

Abrir Vista previa

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=1" alt="Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">John Doe</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=2" alt="Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=3" alt="Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
    </div>
  </div>

  <!-- You'll need to extend your tailwind.config.js to include neumorphic shadows like this: -->
  <!--
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
          'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #000000',
          'inner-neumorphic-light': 'inset 5px 5px 10px #a1a1a1, inset -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #000000',
        }
      },
    },
    plugins: [],
  }
  -->
</div>

RetroPortfolioNavigation

Componente de navegación retro/vintage para portafolio con combinación de colores pastel, responsivo y compatible con el modo oscuro.

Abrir Vista previa

                <nav class="bg-gradient-to-r from-pink-200 via-purple-200 to-indigo-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-6 shadow-lg font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4 md:mb-0">
      <span class="self-center text-3xl font-semibold whitespace-nowrap text-gray-800 dark:text-gray-100">
        My Portfolio
      </span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Projects</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Contact</a>
        </li>
        <li>
          <div class="relative group">
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 md:w-auto dark:text-gray-100 md:dark:hover:text-purple-400 dark:focus:text-gray-100 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown
              <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 absolute group-hover:block">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                </li>
              </ul>
              <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Componente de restablecimiento de contraseña

Un componente de restablecimiento de contraseña interactivo con una interfaz de usuario de modo oscuro, que utiliza una combinación de colores análoga. Diseñado para aplicaciones de comercio electrónico.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
    <h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
    </form>
  </div>
</div>

1 ... 89 90 91 92 93 ... 282

Categorías

Todos los componentes