Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente del foro de la comunidad - Glassmorphism E-commerce

Un componente de foro de la comunidad de estilo glassmorphism para comercio electrónico, con elementos translúcidos, efectos de desenfoque y un esquema de color triádico. Responsivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-blue-300 via-pink-300 to-purple-400 dark:from-gray-900 dark:via-blue-950 dark:to-purple-950 p-4 sm:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Panel: Categories / Navigation -->
    <div class="md:col-span-1 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Forum Categories</h2>

      <nav class="space-y-3">
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">General Discussion</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zM17 8a4 4 0 11-8 0 4 4 0 018 0zM7 16a4 4 0 11-8 0 4 4 0 018 0zM17 16a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Product Reviews</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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 8c-1.657 0-3 .895-3 2v2.219a2 2 0 00.5 1.625l1.625 1.625A2 2 0 0113.219 20H18a2 2 0 002-2V7.89l-3.24-3.24M12 8V7a4 4 0 00-4-4H5a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2zM18 10a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2h-1a2 2 0 01-2-2z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Technical Support</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Shopping Tips & Deals</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">New Topic</span>
        </a>
      </nav>

      <div class="mt-auto">
        <p class="text-sm text-gray-700 dark:text-gray-300">Community Guidelines & Rules</p>
        <a href="#" class="text-blue-700 dark:text-blue-400 hover:underline text-sm">Read More</a>
      </div>
    </div>

    <!-- Main Content: Forum Topics -->
    <div class="md:col-span-2 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">

      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Recent Discussions</h2>

      <!-- Search and Filter -->
      <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
        <input type="text" placeholder="Search discussions..." class="flex-1 p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400">
        <select class="p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100">
          <option>Sort by: Latest</option>
          <option>Sort by: Popular</option>
          <option>Sort by: Unanswered</option>
        </select>
      </div>

      <!-- Topic List -->
      <div class="space-y-4 flex-grow">

        <!-- Topic Card 1 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Best Vacuum Cleaner for Pet Hair?</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by SarahL, 2 hours ago in <span class="font-medium text-blue-700 dark:text-blue-400">Product Reviews</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Looking for recommendations on a powerful vacuum cleaner that can handle heavy pet shedding. Any suggestions or experiences?</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 24 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 1.2K Views</span>
          </div>
        </a>

        <!-- Topic Card 2 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-sky-500 dark:border-sky-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Tips for finding the best online deals</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by DealHunter, 5 hours ago in <span class="font-medium text-purple-700 dark:text-purple-400">Shopping Tips & Deals</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Share your secret tips and tricks for snagging the best discounts and promotions online.</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 48 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 2.5K Views</span>
          </div>
        </a>

        <!-- Topic Card 3 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-red-500 dark:border-red-400" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Trouble with account login after update</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by TechNoob, 1 day ago in <span class="font-medium text-pink-700 dark:text-pink-400">Technical Support</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Anyone else having issues logging into their account after the recent website update? Keeps saying invalid credentials.</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 18 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 980 Views</span>
          </div>
        </a>

      </div>

      <!-- Pagination -->
      <div class="flex justify-center items-center space-x-2 mt-6">
        <button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          Previous
        </button>
        <button class="px-4 py-2 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white font-bold">
          1
        </button>
        <button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          2
        </button>
        <button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          3
        </button>
        <button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          Next
        </button>
      </div>

    </div>

  </div>

</div>

3D_Vibrant_Simple_Social_Carousel

Un componente deslizante de carrusel inspirado en 3D simple, vibrante y receptivo para interfaces de redes sociales, con soporte para modo oscuro.

Abrir Vista previa

                <div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 rounded-lg shadow-xl overflow-hidden">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-300 mb-8 drop-shadow-md">What's Happening?</h2>

  <!-- Carousel Container (simplified for static HTML, typically JS driven) -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 transform perspective-1000">

    <!-- Card 1 -->
    <div class="col-span-1 transform rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-purple-500 dark:border-purple-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/20 to-pink-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-purple-700 dark:text-purple-300">Alice Johnson</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@alice_j</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Just launched my new project! Super excited for feedback. 🎉 Check it out!"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1025/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 12K Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 345 Comments</span>
      </div>
    </div>

    <!-- Card 2 (Center) -->
    <div class="col-span-1 transform scale-105 md:hover:scale-110 md:hover:rotateY-0 transition-all duration-500 ease-in-out z-20 bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-teal-500 dark:border-teal-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-teal-400/20 to-purple-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-teal-400 dark:ring-teal-600 mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-teal-700 dark:text-teal-300">Mark Davis</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@mark_d</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Amazing sunset view from my balcony tonight! Truly breathtaking. #NatureLover"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1016/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 2.5K Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 88 Comments</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="col-span-1 transform -rotateY-10 scale-95 md:hover:rotateY-0 md:hover:scale-100 transition-all duration-500 ease-in-out bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 border-b-4 border-l-2 border-pink-500 dark:border-pink-700 flex flex-col justify-between overflow-hidden relative cursor-pointer group">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-400/20 to-teal-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></div>
      <div class="flex items-center mb-4 z-10">
        <img class="w-12 h-12 rounded-full ring-2 ring-pink-400 dark:ring-pink-600 mr-4" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-lg text-pink-700 dark:text-pink-300">Sophia Lee</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">@sophia_l</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 z-10">"Enjoying a perfect cup of coffee with a good book. Simple pleasures! ☕📚"</p>
      <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md z-10" src="https://picsum.photos/id/1084/400/250" alt="Post Image">
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm z-10">
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 987 Likes</span>
        <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.88 8.88 0 01-4-1l-3 1 1-3a8.88 8.88 0 01-1-4c0-3.866 3.582-7 8-7s8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg> 210 Comments</span>
      </div>
    </div>

  </div>

  <!-- Navigation (can be added with JS for actual carousel functionality) -->
  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
    <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
    <div class="w-3 h-3 rounded-full bg-pink-400 dark:bg-pink-500 opacity-60"></div>
    <div class="w-3 h-3 rounded-full bg-teal-400 dark:bg-teal-500 opacity-60"></div>
  </div>

  <!-- Subtle 3D background elements -->
  <div class="absolute top-0 left-0 w-32 h-32 bg-purple-400/20 dark:bg-purple-600/30 rounded-full blur-xl -translate-x-1/4 -translate-y-1/4"></div>
  <div class="absolute bottom-0 right-0 w-48 h-48 bg-pink-400/20 dark:bg-pink-600/30 rounded-full blur-xl translate-x-1/4 translate-y-1/4"></div>
</div>

Retro Vintage Portafolio Componentes Interactivos

Un componente de portafolio en escala de grises, de temática retro-vintage con elementos interactivos, adecuado para exhibir trabajos o productos. Cuenta con diseño responsivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8">

  <!-- Header/Title -->
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 md:mb-12 text-center leading-tight tracking-wider uppercase drop-shadow-md text-gray-900 dark:text-gray-100" style="text-shadow: 2px 2px 0px #000, -2px -2px 0px #333;">
    _PORTFOLIO_:
    <span class="block text-2xl sm:text-3xl md:text-4xl font-normal mt-2 lowercase text-gray-700 dark:text-gray-300">[PROJECTS & WORKS]</span>
  </h1>

  <!-- Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto w-full">

    <!-- Project Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/67/400/300" alt="Project 1" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Project Alpha</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A ground-breaking application designed to revolutionize user interaction with its intuitive interface and robust backend.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2023]</div>
    </div>

    <!-- Project Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/68/400/300" alt="Project 2" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Cyber-Connect</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A secure communication platform emphasizing data privacy and end-to-end encryption for seamless messaging.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2022]</div>
    </div>

    <!-- Project Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/69/400/300" alt="Project 3" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Bio-Synth AI</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">An advanced AI system capable of synthesizing complex biological data for research and development purposes.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2021]</div>
    </div>

    <!-- Profile Card/About me -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="Developer Avatar" class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300 shadow-md">
        <div class="text-center sm:text-left">
          <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide">Dev. Smith</h2>
          <p class="text-gray-700 dark:text-gray-300 text-lg font-semibold">[FRONTEND ENGINEER]</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Dedicated to crafting robust and visually striking web experiences. Specializing in responsive design and accessible user interfaces. Always pushing the boundaries of digital creation.</p>
      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">HTML5</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">CSS3</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">Tailwind CSS</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">JS</span>
      </div>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">CONTACT</span>
      </button>
    </div>

  </div>

</div>

RetroOAuthButtons

Un componente de botones OAuth simple de temática retro con un esquema de color triádico, ideal para un sitio de portafolio. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, que recuerda a la estética de los años 80/90.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-zinc-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-200 dark:bg-violet-900 border-4 border-lime-500 dark:border-orange-500 transform -skew-x-3 rotate-1 transition-all duration-300">
    <h2 class="text-center text-3xl font-extrabold text-lime-800 dark:text-lime-200 mb-6 font-mono tracking-widest uppercase animate-pulse-text">ACCESS GRANTED</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH GIT
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH BOOK
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH SPACE
      </button>
    </div>
    <p class="text-center text-sm text-lime-700 dark:text-violet-300 mt-6 font-sans italic">Prepare for System Initialization</p>
  </div>
</div>

Componente de filtros de glassmorphism

Un componente de filtros de estilo Glassmorphism simple y receptivo para una cartera, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, colores complementarios y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 p-4 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto p-4 md:p-6 lg:p-8 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 shadow-lg dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50">
    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center dark:text-white drop-shadow-sm">Filter Projects</h2>
    <div class="flex flex-wrap gap-3 justify-center mb-6">
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-blue-500 bg-opacity-40 border border-blue-400 text-white shadow-md hover:scale-105 hover:bg-blue-600 hover:bg-opacity-50 dark:bg-blue-700 dark:bg-opacity-40 dark:border-blue-600 dark:hover:bg-blue-800 dark:hover:bg-opacity-50">
        All
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Web Design
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        UI/UX
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Branding
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Mobile App
      </button>
    </div>
    <div class="flex items-center gap-3">
      <label for="sort-by" class="sr-only">Sort By</label>
      <select id="sort-by" class="flex-grow appearance-none px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:focus:ring-blue-600">
        <option value="recent">Sort by: Recent</option>
        <option value="popularity">Sort by: Popularity</option>
        <option value="alphabetical">Sort by: Alphabetical</option>
      </select>
      <button aria-label="Apply Filters" class="p-3 rounded-full transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-gradient-to-r from-blue-500 to-indigo-500 bg-opacity-60 border border-opacity-40 border-blue-400 text-white shadow-md hover:scale-110 hover:from-blue-600 hover:to-indigo-600 dark:from-blue-700 dark:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
          </svg>
      </button>
    </div>
  </div>
</div>

Componente Mega Menú

Un complejo mega menú responsivo inspirado en 3D para un tablero. Utiliza un esquema de color triádico, admite el modo oscuro y cuenta con múltiples secciones interactivas para la visualización de datos y paneles de control.

Abrir Vista previa

                <nav class="relative bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 shadow-xl z-50 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-purple-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.79-7-4.34-7-8.93h2c0 3.86 3.14 7 7 7v2.93z" />
          </svg>
          <span class="text-white dark:text-purple-400 text-2xl font-bold ml-2">3D Dash</span>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="text-white dark:text-purple-400 hover:text-white dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:scale-105">
            <span class="relative z-10">Dashboard</span>
          </button>
          <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-6 w-screen max-w-4xl opacity-0 invisible group-hover:opacity-100 group-hover:visible translate-y-3 group-hover:translate-y-0 transition-all duration-300 ease-out transform pointer-events-none group-hover:pointer-events-auto bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 rounded-3xl shadow-2xl overflow-hidden pointer-events-auto ring-4 ring-indigo-300 dark:ring-gray-700 perspective-1000" style="transform-style: preserve-3d; backface-visibility: hidden;">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10">
              <!-- Background 3D Elements -->
              <div class="absolute inset-0 z-0 opacity-20">
                  <div class="absolute w-40 h-40 bg-purple-400/30 dark:bg-pink-400/30 rounded-full blur-3xl -left-10 -top-10 animate-pulse-slow"></div>
                  <div class="absolute w-60 h-60 bg-pink-400/30 dark:bg-yellow-400/30 rounded-full blur-3xl -right-20 -bottom-20 animate-pulse-slow animation-delay-700"></div>
                  <div class="absolute w-50 h-50 bg-indigo-400/30 dark:bg-indigo-400/30 rounded-full blur-3xl left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse-slow animation-delay-1400"></div>
              </div>
              <!-- Section 1: Overview -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-purple-300">Overview</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg> Live Analytics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6m-9-11V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-3a2 2 0 00-2-2z"></path></svg> Performance Metrics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M7 16h.01M13 16h.01M17 16h.01M7 21h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> Activity Log</a></li>
                </ul>
              </div>

              <!-- Section 2: Data Visualization -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-pink-300">Reports & Gauges</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l2 2 4-4M16 12h2m-6 3h6m-12 5h.01M12 12v.01M10 20h4a2 2 0 002-2V6a2 2 0 00-2-2H8a2 2 0 00-2 2v12a2 2 0 002 2zm12-7L4 4"></path></svg> Custom Reports</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path></svg> Trend Analysis</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h-6m6 4h-6m6 4h-6m4 0a3 3 0 11-6 0 3 3 0 016 0zM19 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Real-time Gauges</a></li>
                </ul>
              </div>

              <!-- Section 3: Quick Actions / Cards -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-yellow-300">Quick Actions</h3>
                <div class="space-y-3">
                  <a href="#" class="block p-3 rounded-lg bg-indigo-600/50 dark:bg-gray-600/50 hover:bg-indigo-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Add New Data Entry
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-pink-600/50 dark:bg-gray-600/50 hover:bg-pink-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                    View All Records
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-yellow-600/50 dark:bg-gray-600/50 hover:bg-yellow-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.515-1.077 1.485-1.077 2.001 0a2 2 0 011.879 1.442 2 2 0 001.972 1.879 2 2 0 011.442 1.879c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 011.442 1.879 2 2 0 001.972 1.879 2 2 0 011.879 1.442c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442c1.077-.515 1.077-1.485 0-2.001a2 2 0 01-1.442-1.879 2 2 0 00-1.972-1.879 2 2 0 01-1.879-1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442z"></path></svg>
                    Configure Settings
                  </a>
                </div>
              </div>
            </div>
            <!-- 3D Card at the bottom -->
             <div class="relative mt-8 p-4 rounded-xl bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-green-600 dark:to-teal-700 backdrop-filter backdrop-blur-sm shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out hover:scale-[1.02] hover:rotate-x-2 hover:rotate-y-2 hover:shadow-3xl" style="transform: translateZ(50px);">
                <div class="absolute inset-0 opacity-20">
                  <img src="https://picsum.photos/800/200?random=1" alt="Background pattern" class="w-full h-full object-cover" style="filter: brightness(0.4);"/>
                </div>
                <div class="relative z-10 flex items-center justify-between">
                  <div>
                    <h4 class="text-2xl font-extrabold text-white mb-1">Need Assistance?</h4>
                    <p class="text-sm text-blue-100 dark:text-green-100">Our support team is here to help you.</p>
                  </div>
                  <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200 transform hover:scale-105">
                    Contact Support
                    <svg class="ml-2 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                  </a>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-purple-200 dark:text-purple-400 hover:text-white hover:bg-purple-500 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-purple-400 transform transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute inset-x-0 top-16 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 pb-3 space-y-1 sm:px-3" id="mobile-menu">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Dashboard Overview</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Analytics</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Reports</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Settings</a>
  </div>
</nav>

<style>
  /* Adding custom styles for 3D rotation effects */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.4; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  .animation-delay-700 {
    animation-delay: 0.7s;
  }

  .animation-delay-1400 {
    animation-delay: 1.4s;
  }

  .perspective-1000 {
    perspective: 1000px; /* Defines the 3D viewing perspective */
  }

  .rotate-x-2:hover { transform: rotateX(2deg); }
  .rotate-y-2:hover { transform: rotateY(2deg); }
  .rotate-z-1:hover { transform: rotateZ(1deg); }
  .shadow-3xl { 
      box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4), 
                  0 30px 60px -30px rgba(0, 0, 0, 0.5), 
                  inset 0 -2px 6px 0 rgba(0, 0, 0, 0.3); 
  }
  /* Further refined styles for 3D interactions */
  .group:hover .group-hover\:translate-y-0 {
    transform: translateY(0) !important;
  }
  .group:hover .group-hover\:visible {
    visibility: visible !important;
  }
  .group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  .group:hover .group-hover\:pointer-events-auto {
    pointer-events: auto !important;
  }

  /* Ensure mobile menu can be toggled by JS. Tailwind doesn't handle interactive parts without JS. */
  /* For a pure HTML/CSS demo, the mobile menu would typically be activated by a :checked pseudo-class on a hidden checkbox, 
     but that's not standard for a mega menu and would be less semantic than a button with JS. 
     The provided HTML assumes a simple JS toggle for the 'hidden' class on the mobile-menu div and block/hidden on the SVG icons. */

</style>

RetroShoppingcartComponent

Un componente de carrito de compras receptivo con una estética retro / vintage, combinación de colores triádica y soporte para modo oscuro, adecuado para una cartera.

Abrir Vista previa

                <div class="font-sans antialiased text-[#222831] bg-[#FDF0D5] dark:bg-[#001D3D] dark:text-[#E0FBFC] min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-[#F6AE2D] dark:bg-[#003566] p-6 sm:p-8 rounded-lg shadow-xl border-4 border-[#00A1AB] dark:border-[#FFC300] transform transition duration-300 hover:scale-[1.01] overflow-hidden">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-[#001D3D] dark:text-[#E0FBFC] mb-6 sm:mb-8 text-center uppercase tracking-wide border-b-4 border-[#001D3D] dark:border-[#FFC300] pb-2">
      Your Groovy Cart
    </h1>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=1" alt="Vintage Gadget" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Retro Boombox</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Classic sound, modern vibe.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$129.99</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">1</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=2" alt="Vintage Toy" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Pixelated Game Cartridge</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Unlock endless 8-bit adventures.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$39.50</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">2</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-[#FDF0D5] dark:bg-[#001D3D] p-6 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] mb-8">
      <h2 class="text-2xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-4 text-center border-b-2 border-[#F6AE2D] dark:border-[#FFC300] pb-2">Cart Totals</h2>
      <div class="flex justify-between items-center text-lg mb-2">
        <span class="text-[#393E46] dark:text-gray-300">Subtotal:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="subtotal">$208.99</span>
      </div>
      <div class="flex justify-between items-center text-lg mb-4">
        <span class="text-[#393E46] dark:text-gray-300">Shipping:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="shipping">$7.50</span>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t-2 border-[#F6AE2D] dark:border-[#FFC300] pt-4">
        <span class="text-[#001D3D] dark:text-[#E0FBFC]">Total:</span>
        <span class="text-[#00A1AB] dark:text-[#FFC300]" id="total">$216.49</span>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Continue Shopping
      </button>
      <button class="bg-[#00A1AB] dark:bg-[#2A9D8F] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#007D88] dark:hover:bg-[#3DDC84] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Proceed to Checkout
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </button>
    </div>

    <p class="text-center text-xs mt-8 text-[#393E46] dark:text-gray-400">
      Embrace the past, shop the future.
    </p>
  </div>
</div>

Componente de tarjetas de producto skeuomórficas

Componente de tarjetas de producto simple y receptivo con un diseño esqueuomórfico en escala de grises, adecuado para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-900 dark:text-white tracking-tight leading-tight">
      Our Featured Products
    </h2>
    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1015/300/200" alt="Product Image 1">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Advanced Gadget Pro
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Immerse yourself in unparalleled performance with our latest innovation. Designed for the future. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$299.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1016/300/200" alt="Product Image 2">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Elite Sound System
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Experience crystal-clear audio with our state-of-the-art sound system. Perfect for audiophiles. Consectetur adipiscing elit. Faucibus amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$499.50</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1018/300/200" alt="Product Image 3">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Smart Home Hub
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Control your home with ease using our intuitive smart hub. Integration made simple. Dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$175.00</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1/300/200" alt="Product Image 4">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Portable Power Bank
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Never run out of power on the go with our high-capacity power bank. Reliability in your pocket. Lorem ipsum dolor sit amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$49.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Custom styles for skeuomorphic shadows might require a simple Tailwind config extension -->
  <style>
    .shadow-neu {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neu-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #282828;
    }
    .active\:shadow-inner-neu {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .active\:shadow-inner-neu-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #282828;
    }
    .shadow-inner-sm {
      box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1), inset -1px -1px 2px rgba(255,255,255,0.7);
    }
  </style>
  <!-- Note: For production, consider extending theme.boxShadow in tailwind.config.js for these custom shadows. -->
</div>

Componente de la sección de comentarios

Un componente de sección de comentarios inspirado en el glassmorphism para blogs o páginas de contenido, con elementos translúcidos similares al vidrio esmerilado, colores vibrantes, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 min-h-screen dark:from-gray-900 dark:via-purple-900 dark:to-blue-900">
  <div class="max-w-4xl mx-auto backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 rounded-3xl shadow-xl p-6 sm:p-8 lg:p-10 border border-white/20 dark:border-gray-700/20">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 text-center drop-shadow-lg dark:text-purple-300">Comments</h2>

    <!-- New Comment Form -->
    <div class="mb-10 p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md">
      <h3 class="text-2xl font-bold text-white mb-4 dark:text-purple-200">Leave a Comment</h3>
      <form>
        <div class="mb-4">
          <label for="comment-name" class="block text-white text-sm font-semibold mb-2 dark:text-purple-100">Your Name</label>
          <input type="text" id="comment-name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-white/40 border border-white/30 focus:outline-none focus:ring-2 focus:ring-purple-400 placeholder-white/70 text-white dark:bg-gray-700/40 dark:border-gray-600/30 dark:focus:ring-purple-600 dark:placeholder-gray-400" />
        </div>
        <div class="mb-6">
          <label for="comment-text" class="block text-white text-sm font-semibold mb-2 dark:text-purple-100">Your Comment</label>
          <textarea id="comment-text" rows="5" placeholder="Share your thoughts..." class="w-full px-4 py-3 rounded-xl bg-white/40 border border-white/30 focus:outline-none focus:ring-2 focus:ring-purple-400 placeholder-white/70 text-white resize-y dark:bg-gray-700/40 dark:border-gray-600/30 dark:focus:ring-purple-600 dark:placeholder-gray-400"></textarea>
        </div>
        <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transform transition-transform duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800">
          Post Comment
        </button>
      </form>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-8">
      <!-- Comment 1 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Emily Watson</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">2 days ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"This article provided such a fresh perspective on the topic. The glassmorphism design really makes the content pop! Love how interactive and readable it is."</p>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Mark Johnson</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">5 hours ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"Fantastic read! The glassmorphism elements are a nice touch, adding a modern feel without distracting from the text. Great job with the responsive layout, too."</p>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Sarah Lee</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">1 day ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"I appreciate the clear explanations and engaging content. The visual style of this page is truly inspiring and makes reading a pleasure. Can't wait for your next article!"</p>
        </div>
      </div>
    </div>
  </div>
</section>

Ficha de producto de comercio electrónico neumórfico

Un componente de tarjeta de producto de comercio electrónico de estilo UI (Neumorphism) suave con colores en escala de grises, diseñado para sitios web comerciales / corporativos. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito', totalmente receptivo y con soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <!-- Product Card Container -->
  <div class="max-w-xs w-full rounded-2xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-100 dark:bg-gray-800 transition-all duration-300 ease-in-out">

    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark flex items-center justify-center">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 hover:scale-105">
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 transition-colors duration-300">
      Sleek Wireless Headphones
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 transition-colors duration-300 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable earcups.
    </p>

    <div class="flex items-end justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-50 transition-colors duration-300">
        $199.99
      </span>
      <!-- Star Rating Placeholder -->
      <div class="flex space-x-1 text-gray-400 dark:text-gray-600">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 rounded-xl font-medium text-lg text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark hover:text-gray-900 hover:dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 active:shadow-neumorphic-light-inset active:dark:shadow-neumorphic-dark-inset">
      Add to Cart
    </button>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (can be added to a global CSS file or <style> tag) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2c2c2c;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #2c2c2c;
    }
    .shadow-inner-neumorphic-light {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #2c2c2c;
    }
  </style>
</div>

1 ... 64 65 66 67 68 ... 282

Categorías

Todos los componentes