Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

RetroChartsComponent

Un componente de gráfico retro/vintage con efectos responsivos y soporte para temas oscuros utilizando Tailwind CSS. Incluye imágenes de marcador de posición.

Abrir Vista previa

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>

Un componente de cargador de estilo Neumorphism con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. No se necesita JavaScript. Utiliza sombras sutiles para crear un efecto extruido desde el fondo. Modo oscuro compatible con CSS.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-32 h-32 relative">
    <div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
    <div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
      Loading...
    </div>
  </div>
</div>

<style>
  .neumorphic-shadow {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-shadow-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
  }
  @keyframes ping {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>

Componente de menú desplegable

Un componente de menú desplegable diseñado con el estilo Glassmorphism, con efectos responsivos y soporte para temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.07a.75.75 0 011.07 1.04l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="z-10 hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Account Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Support
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        License
      </a>
      <div class="border-t border-gray-200 dark:border-gray-700"></div>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Logout
      </a>
    </div>
  </div>
</div>

<style>
  .bg-glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 8px;
  }
  .dark .bg-glass {
    background: rgba(31, 41, 55, 0.4);
  }
</style>

Componente de reseñas de productos

Componente de reseñas de productos con diseño de materiales, efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
      </p>
    </div>
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
    </div>
  </div>
</div>

Componente de tablas de datos

Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.

Abrir Vista previa

                <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
    <table class="min-w-full border-collapse">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900">
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
        </tbody>
    </table>
</div>

Cuadro de búsqueda de brutalismo

Componente de cuadro de búsqueda con estilo brutalismo, responsivo, soporte de tema oscuro, sin JS. Utiliza picsum.photos para imágenes y randomuser.me para avatares si es necesario.

Abrir Vista previa

                <div class="max-w-md mx-auto">
  <form class="flex items-center">
    <label for="simple-search" class="sr-only">Search</label>
    <div class="relative w-full">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
      </div>
      <input type="text" id="simple-search" class="bg-white dark:bg-gray-800 border border-black dark:border-white text-black dark:text-white text-sm font-mono focus:ring-black focus:border-black block w-full pl-10 p-2.5 transform -translate-x-1 -translate-y-1 dark:transform-none dark:translate-x-1 dark:translate-y-1 transition duration-100 ease-in-out" placeholder="Search anything..." required>
    </div>
    <button type="submit" class="p-2.5 ml-2 text-sm font-mono text-white bg-black border border-black hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-white dark:text-black dark:border-white dark:hover:bg-gray-200 dark:focus:ring-gray-800 transform translate-x-1 translate-y-1 dark:transform-none dark:-translate-x-1 dark:-translate-y-1 transition duration-100 ease-in-out">
      <svg class="w-5 h-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>
      <span class="sr-only">Search</span>
    </button>
  </form>
</div>

Alerta de tiempo de espera de sesión

Componente de alerta de tiempo de espera de sesión con estilo de microinteracciones, efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
                <svg class="w-5 h-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="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="mt-4">
            <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
                <span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end space-x-3">
            <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</button>
        </div>
    </div>
</div>

Componente de botones neumórficos

Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
  <div class="flex space-x-4">
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 1</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 2</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
    <button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
      <span class="text-gray-900 dark:text-gray-200">Button 3</span>
      <div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>
  </div>
</div>

Componente de notificaciones Retro Toast

Un componente de notificación del sistema de temática retro con diseño responsivo y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="fixed bottom-5 right-5 space-y-3">
  <!-- Success Toast -->
  <div class="bg-green-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-bounce">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
        <span>Success! Your operation was successful.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-shake">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
        <span>Error! Something went wrong.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Info Toast with Avatar -->
  <div class="bg-blue-600 text-white p-4 rounded-lg shadow-lg font-mono text-sm animate-fade-in">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <span>Info: A new message has arrived.</span>
      </div>
      <button class="ml-4 focus:outline-none">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark Mode Styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .bg-green-600 {
        background-color: #059669;
      }
      .dark .bg-red-600 {
        background-color: #dc2626;
      }
      .dark .bg-blue-600 {
        background-color: #2563eb;
      }
      .dark .text-white {
        color: #d1d5db;
      }
    }

    /* Retro Animations */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-10%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
      20%, 40%, 60%, 80% { transform: translateX(10px); }
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .animate-bounce {
      animation: bounce 1s infinite;
    }

    .animate-shake {
      animation: shake 0.5s infinite;
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out;
    }

    
  </style>
</div>

Componente de ventana de chat

Un componente de ventana de chat responsivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un encabezado con información del usuario, un área de mensajes con mensajes entrantes y salientes y un pie de página para escribir nuevos mensajes. Las imágenes son marcadores de posición de picsum.photos y randomuser.me.

Abrir Vista previa

                <div class="flex flex-col h-screen bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <h1 class="text-lg font-semibold">Chat User</h1>
    </div>
    <!-- Add any header icons here -->
  </header>

  <!-- Message Area -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex items-start mb-4">
      <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
      <div class="flex flex-col">
        <div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
          Hello! How are you?
        </div>
        <span class="text-xs text-gray-500">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col items-end">
        <div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
          I'm good, thanks! How about you?
        </div>
        <span class="text-xs text-gray-500">10:05 AM</span>
      </div>
      <img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>

    <!-- Add more messages here -->

  </div>

  <!-- Footer -->
  <footer class="flex items-center p-4 bg-gray-800">
    <input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
    <button class="bg-blue-600 text-white rounded-full p-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
      </svg>
    </button>
  </footer>
</div>

1 ... 195 196 197 198 199 ... 242

Categorías

Todos los componentes

RetroChartsComponent

Cargador de neumorfismo

Componente de menú desplegable

Componente de reseñas de productos

Componente de tablas de datos

Cuadro de búsqueda de brutalismo

Alerta de tiempo de espera de sesión

Componente de botones neumórficos

Componente de notificaciones Retro Toast

Componente de ventana de chat