Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Saltar al enlace de contenido

Un componente minimalista de enlace de salto de contenido para comercio electrónico, con colores vibrantes, diseño receptivo y compatibilidad con modo oscuro.

Abrir Vista previa

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-pink-500 focus:text-white focus:p-3 focus:rounded-lg focus:z-50 dark:focus:bg-purple-700 dark:focus:text-yellow-300">Skip to main content</a>

Componente de componentes de navegación

Un componente de navegación retro-vintage para un tablero, con un diseño complejo con colores complementarios, diseño receptivo y soporte de temas oscuros con Tailwind CSS. Incluye un logotipo, enlaces de navegación, una barra de búsqueda e información de perfil de usuario.

Abrir Vista previa

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
      <div class="hidden md:flex space-x-6 ml-8">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>

    <div class="flex items-center space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
        <svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>

      <div class="relative group">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
        </div>
      </div>

      <button class="md:hidden text-white focus:outline-none">
        <svg class="w-8 h-8" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="w-full md:hidden mt-4">
      <div class="flex flex-col space-y-2">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>
  </div>
</nav>

Componente de fuente de actividad

Componente de alimentación de actividad brutalista para sitios web comerciales / corporativos con combinación de colores análoga, complejidad moderada, diseño receptivo y soporte de temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>

Componente de tablas de datos

Componente de tablas de datos de Glassmorphism con colores vibrantes para la cartera, responsivo con soporte para modo oscuro. No se necesita JavaScript, solo HTML con Tailwind CSS.

Abrir Vista previa

                <div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
    <h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
        <thead>
          <tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
            <th class="px-6 py-3">Project Name</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">Status</th>
            <th class="px-6 py-3">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Vibrant Dash</td>
            <td class="px-6 py-4">Dashboard UI</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">AquaFlow Landing</td>
            <td class="px-6 py-4">Website</td>
            <td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Neon Chatbot</td>
            <td class="px-6 py-4">Application</td>
            <td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Retro Portfolio</td>
            <td class="px-6 py-4">Portfolio</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Componente Mapas de calor

Un componente de mapa de calor 3D con un esquema de color análogo, adecuado para una cartera. Es sensible y admite el modo oscuro.

Abrir Vista previa

                <div class="p-8 dark:bg-gray-900 min-h-screen">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
    
    <!-- Responsive Grid for Heat Map Squares -->
    <div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
      {[...Array(98)].map((_, i) => (
        <div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
             style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
      ))}
    </div>
    
    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Project 1 -->
      <div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
        <p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
      </div>
      
      <!-- Project 2 -->
      <div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
        <h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
        <p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
      </div>
    </div>

    <div class="mt-12 text-center">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
      <p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
      <p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
    </div>
  </div>
</div>

SkeuomorphicSocialMediaChart

Un componente de gráfico simple inspirado en Skeuomórfico para redes sociales, con colores complementarios y diseño receptivo.

Abrir Vista previa

                <div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
  <div class="flex items-end justify-between h-40 mb-4">
    <!-- Bar 1 (e.g., Likes) -->
    <div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
    <!-- Bar 2 (e.g., Comments) -->
    <div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
    <!-- Bar 3 (e.g., Shares) -->
    <div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
    <!-- Bar 4 (e.g., Views) -->
    <div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
  </div>
  <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
  </div>
</div>

Componente del sistema de clasificación

Componente del sistema de clasificación retro / vintage para comercio electrónico con esquema de color complementario. Responsivo con soporte de modo oscuro. No se necesita JavaScript, solo HTML con Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-8 min-h-screen flex items-center justify-center font-mono">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 max-w-md w-full border-4 border-purple-500 dark:border-yellow-400 transform rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-purple-700 dark:text-yellow-300 mb-2">Rate Our Product!</h2>
      <p class="text-gray-600 dark:text-gray-400">Share your thoughts on this awesome vintage item.</p>
    </div>

    <div class="flex justify-center items-center mb-6 space-x-2">
      <label for="rating" class="sr-only">Rating</label>
      <input type="range" id="rating" name="rating" min="1" max="5" value="4" class="slider w-full h-2 rounded-lg appearance-none cursor-pointer bg-gradient-to-r from-purple-400 to-red-400 dark:from-yellow-400 dark:to-green-400 thumb-retro" style="--slider-track-color: #d1d5db; --slider-thumb-color: #8b5cf6;">
      <span class="text-2xl font-bold text-purple-700 dark:text-yellow-300" id="rating-value">4</span>
    </div>

    <div class="grid grid-cols-5 gap-2 mb-6">
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Terrible</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Bad</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Okay</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Good</span>
      </button>
      <button class="rating-star group relative w-12 h-12 flex items-center justify-center bg-gray-300 dark:bg-gray-700 rounded-full text-2xl text-gray-500 dark:text-gray-400 hover:bg-purple-400 hover:text-white dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition-all duration-200 shadow-md transform hover:scale-110">
        <span class="star-icon">⭐⭐⭐⭐⭐</span>
        <span class="tooltip absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Excellent</span>
      </button>
    </div>

    <div class="mb-6">
      <label for="feedback" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Feedback:</label>
      <textarea id="feedback" name="feedback" rows="4" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-yellow-300 bg-gray-100 dark:bg-gray-700 resize-none placeholder-gray-500 dark:placeholder-gray-400 font-mono" placeholder="Tell us more about your experience..."></textarea>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-purple-800 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:text-gray-900 dark:border-yellow-700 w-full sm:w-auto">
        Submit Rating
      </button>
      <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition-all duration-200 transform hover:scale-105 shadow-lg border-2 border-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-800 w-full sm:w-auto">
        Cancel
      </button>
    </div>
  </div>
</div>

<style>
  /* Retro slider thumb styles */
  .thumb-retro::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-webkit-slider-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  .thumb-retro::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #8b5cf6; /* Purple */
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #f9fafb; /* White */
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.4); /* Purple glow */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }

  .dark .thumb-retro::-moz-range-thumb {
    background: #fbbf24; /* Yellow */
    border-color: #111827; /* Dark gray */
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4); /* Yellow glow */
  }

  /* Tooltip for stars */
  .group .tooltip {
    display: none;
  }

  .group:hover .tooltip {
    display: block;
  }

  /* Custom styles for star rating selection (active state - optional, can be done with JS) */
  .rating-star:hover .star-icon {
    animation: pulse-star 0.3s ease-in-out infinite alternate;
  }

  @keyframes pulse-star {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
  }

  /* Hide the default range input track */
  input[type="range"]::-webkit-slider-runnable-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }

  input[type="range"]::-moz-range-track {
    background: var(--slider-track-color);
    border-radius: 9999px;
  }
</style>

Componente de incrustación de medios

Un componente de incrustación multimedia receptivo diseñado con skeuomorfismo, utilizando un esquema de color monocromático. Incluye un reproductor de vídeo, una sección de transcripción y botones para compartir en redes sociales. El diseño es compatible con el modo oscuro y está construido con Tailwind CSS.

Abrir Vista previa

                <div class="p-8 bg-gray-200 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-4xl transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.02] border border-gray-300 dark:border-gray-600">
    <div class="relative pb-[56.25%] h-0 mb-6 rounded-2xl overflow-hidden shadow-xl border border-gray-300 dark:border-gray-700">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-2">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-4 tracking-tight drop-shadow-sm">The Art of Skeuomorphism in UI Design</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Skeuomorphism, as a design principle, involves incorporating ornamental design cues from physical objects into digital interfaces. It aims to make new functions familiar and intuitive by mimicking real-world counterparts. This approach often uses textures, shadows, and highlights to give digital elements a tangible feel, enhancing user comprehension and engagement, especially in blog and content consumption platforms.
        </p>

        <div class="border-t border-b border-gray-400 dark:border-gray-600 py-4 mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="font-semibold text-gray-800 dark:text-gray-200">John Doe</span>
          </div>
          <div class="flex space-x-3 text-gray-600 dark:text-gray-400">
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 11H9V9h2V7h2v2h2v2h-2v2h-2v-2z"/></svg>
            </a>
            <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </a>
          </div>
        </div>

        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Transcript</h3>
        <div class="bg-gray-300 dark:bg-gray-700 p-5 rounded-xl shadow-inner border border-gray-400 dark:border-gray-600 h-64 overflow-y-auto custom-scrollbar">
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:00]</span> Welcome to our deep dive into Skeuomorphism, a fascinating design trend that continues to influence digital interfaces.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:15]</span> Originally, skeuomorphism helped users transition from physical to digital tools by replicating familiar real-world cues.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:30]</span> Think about the early calculator apps that looked exactly like physical calculators, with their three-dimensional buttons and LCD displays.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[00:45]</span> This design philosophy provides a sense of tangibility and familiarity, making complex digital interactions feel more intuitive.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:00]</span> While minimalism has gained prominence, skeuomorphism still finds its place, especially in applications where a sense of realism or traditional aesthetics is key.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:15]</span> For content platforms and blogs, it can enhance readability by visually separating content blocks and interactive elements.
          </p>
          <p class="text-gray-800 dark:text-gray-200 mb-2">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:30]</span> This component demonstrates how skeuomorphic principles, combined with a monochromatic palette, can create a rich, inviting, and highly functional media embed.
          </p>
          <p class="text-gray-800 dark:text-gray-200">
            <span class="font-semibold text-gray-900 dark:text-gray-100">[01:45]</span> We hope this component inspires you to explore the depths of design.
          </p>
        </div>
      </div>

      <div class="md:col-span-1">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-3">Related Content</h3>
        <div class="space-y-4">
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=1" alt="Related image 1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">The Revival of Vintage Design</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Explore how old-school aesthetics are making a comeback in modern design.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=2" alt="Related image 2">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Monochromatic Magic in UI</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Discover the power of single-color palettes in creating cohesive interfaces.</p>
          </div>
          <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-md border border-gray-400 dark:border-gray-600 transform transition-transform duration-200 hover:scale-[1.02] hover:shadow-lg">
            <img class="rounded-lg mb-3 shadow border border-gray-300 dark:border-gray-500" src="https://picsum.photos/400/225?random=3" alt="Related image 3">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">Responsive Design Best Practices</h4>
            <p class="text-sm text-gray-700 dark:text-gray-300">Learn how to build websites that look great on any device, anywhere.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #ccc;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border: 3px solid #4a5568;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
  }
</style>

Componente de inicio de sesión/registro

Un componente de inicio de sesión / registro receptivo para comercio electrónico con microinteracciones, combinación de colores análoga y soporte para temas oscuros, construido con Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full relative overflow-hidden">
    
    <!-- Analogous Color Scheme Elements (example: blues and greens) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-blue-200 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
    <div class="absolute top-0 right-0 w-24 h-24 bg-green-200 dark:bg-green-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-24 h-24 bg-teal-200 dark:bg-teal-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white" id="form-title">Login</h2>
      </div>

      <!-- Login Form -->
      <form id="login-form">
        <div class="mb-4">
          <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="signup-link">Sign up</a>
        </p>
      </form>

      <!-- Signup Form (hidden by default) -->
      <form id="signup-form" class="hidden">
        <div class="mb-4">
          <label for="signup-name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
          <input type="text" id="signup-name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="John Doe">
        </div>
        <div class="mb-4">
          <label for="signup-email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
          <input type="email" id="signup-email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="[email protected]">
        </div>
        <div class="mb-6">
          <label for="signup-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
          <input type="password" id="signup-password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 dark:border-gray-600 transition duration-300 ease-in-out transform focus:scale-105" placeholder="********">
        </div>
        <div class="flex items-center justify-between mb-6">
          <input type="submit" value="Sign Up" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition duration-300 ease-in-out transform hover:scale-105 active:scale-95">
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
          Already have an account? <a href="#" class="text-green-500 hover:text-green-800 dark:text-green-400 dark:hover:text-green-600 font-bold transition duration-300 ease-in-out opacity-75 hover:opacity-100" id="login-link">Login</a>
        </p>
      </form>
    </div>
  </div>
</div>

<!-- Just a little bit of inline CSS for the blob animation - usually this would be in a CSS file -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

<script>
  // This script is for toggling between login and signup forms
  // In a real application, this would be handled by a JavaScript framework or library
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');
  const loginLink = document.getElementById('login-link');
  const signupLink = document.getElementById('signup-link');
  const formTitle = document.getElementById('form-title');

  signupLink.addEventListener('click', (e) => {
    e.preventDefault();
    loginForm.classList.add('hidden');
    signupForm.classList.remove('hidden');
    formTitle.textContent = 'Sign Up';
  });

  loginLink.addEventListener('click', (e) => {
    e.preventDefault();
    signupForm.classList.add('hidden');
    loginForm.classList.remove('hidden');
    formTitle.textContent = 'Login';
  });
</script>

Componente del Foro de la Comunidad

Un componente del foro de la comunidad con diseño de esqueuomorfismo, combinación de colores triádica y complejidad simple, para fines de redes sociales, construido con Tailwind CSS. Incluye diseño responsivo y soporte para temas oscuros.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-2xl border-t border-l border-gray-200 dark:border-gray-600">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md">Community Forum</h1>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Connect, Share, Discuss.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-2">Discussions</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Engage in lively conversations.</p>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-red-200 to-red-300 dark:from-red-800 dark:to-red-700 p-5 rounded-xl shadow-inner border border-red-300 dark:border-red-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-red-700 dark:text-red-200 mb-2">Announcements</h2>
        <p class="text-red-600 dark:text-red-300 text-sm">Stay updated with the latest news.</p>
        <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-green-200 to-green-300 dark:from-green-800 dark:to-green-700 p-5 rounded-xl shadow-inner border border-green-300 dark:border-green-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-200 mb-2">Members</h2>
        <p class="text-green-600 dark:text-green-300 text-sm">Meet the community members.</p>
        <button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>
    </div>

    <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600">
      <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Latest Posts</h2>
      <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">John Doe <span class="text-gray-500 dark:text-gray-400 text-sm italic">2 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">How do you handle state management in large scale applications?</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 mr-4" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
          <div>
            <p class="text-red-700 dark:text-red-300 font-semibold">Jane Smith <span class="text-gray-500 dark:text-gray-400 text-sm italic">5 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Excited about the new forum features!</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
          <div>
            <p class="text-green-700 dark:text-green-300 font-semibold">Mike Johnson <span class="text-gray-500 dark:text-gray-400 text-sm italic">1 day ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Looking for collaborators on an open-source project.</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 tracking-wide text-lg">
        Load More Posts
      </button>
    </div>
  </div>
</div>

1 ... 84 85 86 87 88 ... 282

Categorías

Todos los componentes