Todos los componentes

Componente modal de modo oscuro

Un componente modal responsivo simple diseñado para interfaces de redes sociales en modo oscuro con un esquema de color pastel.

Abrir vista previa

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

Perfil de usuario Tarjeta simple

Tarjeta de perfil de usuario receptiva con Tailwind CSS, diseño de materiales, combinación de colores de tonos tierra. Compatible con el modo oscuro, no se necesita JS.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/87.jpg" alt="User avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Exploring the world, one byte at a time.</p>
    </div>
    <div class="grid grid-cols-2 gap-4 mt-6">
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Followers</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">1.2k</p>
      </div>
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Following</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">350</p>
      </div>
    </div>
    <div class="flex justify-center mt-6">
      <button class="px-4 py-2 font-bold text-white bg-teal-600 rounded-lg shadow-md hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800">View Profile</button>
    </div>
  </div>
</div>

RetroPastelSocialSidebar

Un componente de navegación de barra lateral simple y receptivo con diseño retro / vintage de los 80 / 90, colores pastel y soporte para modo oscuro, diseñado para interfaces de redes sociales que usan Tailwind CSS.

Abrir vista previa

                <div class="flex h-screen bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-6 space-y-6 transition-transform transform -translate-x-full md:translate-x-0 md:relative fixed inset-y-0 left-0 z-50">
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="h-12 w-12 rounded-full ring-2 ring-pink-400 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold">Jane Doe</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe</p>
      </div>
    </div>

    <nav class="space-y-2">
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover: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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9a1 1 0 01-1-1v-5m3-7v3"/></svg>
        <span class="font-medium">Home</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover: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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.932 8-11 8a9.913 9.913 0 01-3.365-.686A2 2 0 015 20.5V17m-7-3h2m-2 4h2m4-2h2m-2 4h2"/></svg>
        <span class="font-medium">Messages</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover: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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1"/></svg>
        <span class="font-medium">Notifications</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover: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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        <span class="font-medium">Profile</span>
      </a>
      <a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
        <svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover: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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>
  </div>

  <!-- Content Area -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">Main Content</h1>
    <!-- Your content goes here -->
    <p class="text-gray-700 dark:text-gray-300">This is where the main content of your page will be displayed.</p>
  </div>
</div>

Componente de componentes interactivos

Componente de componentes interactivos con diseño minimalista/plano, combinación de colores en tonos tierra y nivel de complejidad complejo para un propósito de tablero, implementado con Tailwind CSS. Diseño responsivo con soporte para temas oscuros. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Header -->
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
      </div>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
    </div>
  </header>

  <!-- Main Content -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Card 1: Sales Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <!-- Placeholder for chart/graph -->
      <div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
        Chart or Graph Placeholder
      </div>
    </div>

    <!-- Card 2: Recent Orders -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
      <ul>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1001</span>
          <span class="text-green-600 dark:text-green-400">$150.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1002</span>
          <span class="text-green-600 dark:text-green-400">$220.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1003</span>
          <span class="text-green-600 dark:text-green-400">$95.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1004</span>
          <span class="text-green-600 dark:text-green-400">$310.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1005</span>
          <span class="text-green-600 dark:text-green-400">$180.00</span>
        </li>
      </ul>
    </div>

    <!-- Card 3: User Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
      <!-- Placeholder for activity feed -->
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
      </ul>
    </div>

    <!-- Card 4: Statistics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
        </div>
      </div>
    </div>

    <!-- Card 5: Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
      </div>
    </div>

    <!-- Card 6: Image Gallery (using picsum.photos) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
      <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
        <img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
        <img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
        <img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
      </div>
    </div>

  </div>

</div>

Componente Mapas

Un componente de mapas responsivo diseñado con un estilo skeuomórfico, con suaves colores pastel y una interfaz rica adecuada para las redes sociales. El componente admite los modos claro y oscuro e incluye varios elementos interactivos.

Abrir vista previa

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-xl p-6">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Explore the Map</h2>
  <div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
    <img src="https://picsum.photos/400/300?random=1" alt="Map" class="w-full h-full object-cover">
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold px-2 py-1 rounded-full shadow-md">Current Location</span>
    </div>
  </div>
  <div class="mt-4 w-full">
    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Connect with Friends</h3>
    <div class="flex flex-wrap justify-between">
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">@janesmith</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Alice Johnson</p>
          <p class="text-gray-600 dark:text-gray-400">@alicejohnson</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componente CAPTCHA de neumorfismo

Un componente CAPTCHA complejo y responsivo diseñado en un estilo neumórfico para sitios de comercio electrónico, con soporte para temas oscuros, utilizando Tailwind CSS.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">We are not robots!</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-6">Please complete the CAPTCHA to continue.</p>
        <div class="flex flex-col mb-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Random" class="rounded-lg shadow-inner mb-4">
            <span class="text-sm text-gray-500 dark:text-gray-400">Select all images with cars</span>
        </div>
        <div class="grid grid-cols-2 gap-2 mb-4">
            <img src="https://picsum.photos/200/200?random=2" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 1">
            <img src="https://picsum.photos/200/200?random=3" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 2">
            <img src="https://picsum.photos/200/200?random=4" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 3">
            <img src="https://picsum.photos/200/200?random=5" class="rounded-lg shadow-inner cursor-pointer hover:shadow-lg" alt="Random Image 4">
        </div>
        <div class="flex flex-col mb-4">
            <label class="text-sm text-gray-600 dark:text-gray-300 mb-2">Enter the text you see:</label>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 shadow-inner">
                <input type="text" class="w-full bg-transparent outline-none text-gray-800 dark:text-gray-100" placeholder="Type here...">
            </div>
        </div>
        <div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg shadow">Verify</button>
        </div>
    </div>
</div>

Alerta de tiempo de espera de sesión

Componente de alerta de tiempo de espera de sesión retro / vintage con tonos tierra, diseño receptivo y soporte para temas oscuros.

Abrir vista previa

                <div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
  <div class="flex items-center justify-center min-h-screen">
    <div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
      <div class="text-center">
        <svg class="mx-auto mb-4 h-12 w-12 text-amber-500" 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.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
        <h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
        <p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
          Stay Logged In
        </button>
      </div>
    </div>
  </div>
</div>

Componente de ventana de chat

Un componente de ventana de chat tridimensional en escala de grises para paneles con complejidad moderada y funciones interactivas. Diseño responsivo con soporte para temas oscuros.

Abrir vista previa

                <!-- Chat Window Component (3D Grayscale, Moderate Complexity, Dashboard) -->

<div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-lg">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat</h2>
    <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <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="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 overflow-y-auto space-y-4 pr-2">
    <!-- Incoming Message (3D Effect) -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Hello! This is an incoming message with a subtle 3D effect.</p>
      </div>
    </div>

    <!-- Outgoing Message (3D Effect) -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>This is an outgoing message designed with a 3D feel.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-start space-x-3">
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div class="relative max-w-xs px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg shadow-md before:content-[''] before:absolute before:-left-1 before:top-3 before:w-2 before:h-2 before:bg-gray-300 dark:before:bg-gray-700 before:rotate-45">
        <p>Here's another example of an incoming message.</p>
      </div>
    </div>

     <!-- Another Outgoing Message -->
    <div class="flex justify-end items-start space-x-3">
      <div class="relative max-w-xs px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-md after:content-[''] after:absolute after:-right-1 after:top-3 after:w-2 after:h-2 after:bg-blue-500 dark:after:bg-blue-700 after:rotate-45">
        <p>And this is another outgoing message.</p>
      </div>
      <img class="w-8 h-8 rounded-full shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    </div>
  </div>

  <!-- Input Area -->
  <div class="mt-4 pt-4 border-t border-gray-300 dark:border-gray-700 flex items-center">
    <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="ml-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
      Send
    </button>
  </div>
</div>

Neumorfismo Cuadrícula del panel de control

Componente de tablero de diseño de cuadrícula de neumorfismo con esquema de color complementario

Abrir vista previa

                <div class="dark:bg-gray-900 dark:text-white min-h-screen p-10">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-10">

    <!-- Card 1 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Orders</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">1,234</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-green-400 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v10m0-10a5 5 0 110 10v-10z" />
        </svg>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Revenue</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">$12,345</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-blue-400 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Customers</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">456</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-red-400 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5v-2a3 3 0 013-3h1a3 3 0 013 3v2zm-7-2a3 3 0 003 3h1a3 3 0 003-3M12 8a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Products</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">789</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-yellow-400 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
        </svg>
      </div>
    </div>

  </div>
</div>

Componente Botones

Skeuomorphism Componente de botones de tablero complejos análogos con diseño receptivo y soporte de tema oscuro.

Abrir vista previa

                <div class="flex flex-wrap justify-center items-center p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-xl">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Dashboard
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Reports
  </button>

  <!-- Tertiary Button -->
  <button class="m-4 px-8 py-4 bg-gradient-to-br from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-800 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white text-lg font-bold transform transition-transform duration-200 hover:scale-105">
    Analytics
  </button>

  <!-- Disabled Button -->
  <button class="m-4 px-8 py-4 bg-gray-400 dark:bg-gray-600 rounded-xl shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-gray-200 dark:text-gray-400 text-lg font-bold cursor-not-allowed">
    Settings
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-4 bg-gradient-to-br from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] text-white transform transition-transform duration-200 hover:scale-105">
    <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 4v16m8-8H4"></path></svg>
  </button>
</div>

Categorías