搜索组件

类别

组件产品卡片

产品卡片

以卡片格式显示产品信息

产品卡组件 - 农业/养殖

专为农业和农业网站设计的响应式产品卡组件，具有简洁的排版、网格系统和秋色。包括深色模式支持。

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-bold text-center mb-10 tracking-tight dark:text-orange-500">
      Our Farm Produce
    </h2>
    <p class="max-w-3xl mx-auto text-center text-lg mb-12 opacity-90 leading-relaxed">
      Discover our selection of fresh, high-quality agricultural products, sustainably grown and harvested with care. From field to your table.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1015/400/300" alt="Fresh Organic Apples">
          <span class="absolute top-3 right-3 bg-orange-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md">NEW</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Organic Gala Apples</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet and crisp, perfect for snacking or baking. Grown without pesticides.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$4.99 <span class="text-base text-stone-500">/lb</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1004/400/300" alt="Freshly Harvested Carrots">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Farm Fresh Carrots</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet, crunchy, and packed with vitamins. Directly from our fields to your kitchen.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$2.49 <span class="text-base text-stone-500">/bunch</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/300" alt="Artisan Sourdough Bread">
          <span class="absolute top-3 left-3 bg-burgundy-700 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md dark:bg-burgundy-600">LIMITED</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Artisan Sourdough Bread</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Hand-baked with our own ancient grain flour. A true taste of tradition.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$6.00 <span class="text-base text-stone-500">/loaf</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/300" alt="Farm Fresh Eggs">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Pasture-Raised Eggs</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">From happy, healthy chickens roaming freely. Rich yolks and superior taste.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$5.19 <span class="text-base text-stone-500">/dozen</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-orange-300 dark:text-orange-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

    </div>
  </div>
</section>

Product Cards 组件

简单、响应迅速的产品卡，具有水彩/艺术设计、互补配色方案和完整的深色模式支持，适用于投资组合。

打开预览

                <div class="bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-6 sm:p-8 lg:p-12 min-h-screen font-sans">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 drop-shadow-lg leading-tight">
      Our Artistic Creations
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-pink-200 dark:border-pink-800
                  bg-blend-multiply bg-cover bg-center"
           style="background-image: url('https://picsum.photos/id/107/600/400?blur=1');">
        <div class="absolute inset-0 bg-gradient-to-t from-pink-300/80 via-transparent to-transparent dark:from-pink-900/80 group-hover:from-pink-400/90 group-hover:dark:from-pink-800/90 transition-all duration-300"></div>
        <img src="https://picsum.photos/id/107/600/400" alt="Abstract Painting" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

        <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
          <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Sunset Reflection</h3>
          <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A vibrant watercolor capturing the essence of a serene sunset over water.</p>
          <div class="flex items-center justify-between text-lg font-semibold">
            <span>$120.00</span>
            <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 dark:from-pink-700 dark:to-red-700 dark:hover:from-pink-800 dark:hover:to-red-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-orange-200 dark:border-orange-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/105/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-orange-300/80 via-transparent to-transparent dark:from-orange-900/80 group-hover:from-orange-400/90 group-hover:dark:from-orange-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/105/600/400" alt="Figurative Sculpture" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Forest Whisper</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">An impressionistic oil painting capturing the mysterious allure of a deep forest.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$180.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 dark:from-orange-700 dark:to-yellow-700 dark:hover:from-orange-800 dark:hover:to-yellow-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-purple-200 dark:border-purple-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/106/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-300/80 via-transparent to-transparent dark:from-purple-900/80 group-hover:from-purple-400/90 group-hover:dark:from-purple-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/106/600/400" alt="Abstract Design" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Urban Energy</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A dynamic acrylic work reflecting the vibrant chaos and beauty of city life.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$95.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

    </div>
  </div>
</div>

拟物化模拟作业卡组件

具有拟物化设计风格的响应式工作卡组件，使用类似的配色方案，适用于工作板和职业发展平台。包括深色模式支持。

打开预览

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

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

    <!-- Job Card 1 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Remote
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 2 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 2 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Hybrid (NYC)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 5 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 3 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            On-site (London)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 1 week ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">React</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

  </div>
</div>

ArtDeco_ProductCards_Music

具有装饰艺术美感的简单响应式产品卡组件，具有几何图案和日落/暖色调方案，适用于音乐和音频平台。包括深色模式支持。

打开预览

                <div class="bg-gradient-to-br from-yellow-100 via-orange-200 to-red-200 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-serif flex items-center justify-center">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-12 tracking-wider text-yellow-900 dark:text-orange-300 drop-shadow-lg leading-tight">
      <span class="block">Curated Sounds</span>
      <span class="block text-3xl md:text-4xl lg:text-5xl mt-2">Golden Age Audio</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iI2ZmZTQ0ZSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iIzQ0NSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1047/400/300" alt="Vintage Turntable" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">The Gilded Gramophone</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Experience unparalleled warmth with our meticulously restored vintage turntable. A true centerpiece for any audiophile.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$1,299</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZ1/yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1118/400/300" alt="Art Deco Speakers" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Symphony Tower Speakers</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Precision-engineered sound with a sleek Art Deco design. Fill your space with rich, immersive audio.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$849</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/111/400/300" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Aria Wireless Headphones</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Unleash your music with luxurious comfort and crystal-clear sound, wirelessly.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$229</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Product Cards 组件

一个复杂的响应式产品卡组件，适用于娱乐/媒体平台，采用有机/自然灵感设计，使用森林/绿色调色板。包括深色模式支持和交互元素。

打开预览

                <div class="bg-gradient-to-br from-emerald-50 to-green-100 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-gray-950">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-green-900 text-center mb-12 dark:text-green-200">
      Explore Our Worlds
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Card 1 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/237/800/600" alt="Image of a lush forest">
          <div class="absolute inset-0 bg-gradient-to-t from-green-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-green-600 text-white text-xs font-semibold rounded-full dark:bg-green-700">Fantasy</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Whispers of Eldoria</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">A captivating tale of ancient magic and forgotten kingdoms. Dive into a world where every creature has a story.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author 1">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Author 2">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Feat. Alex & Sarah</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 15m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.8</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/1025/800/600" alt="Image of abstract bioluminescent mushrooms">
          <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-emerald-600 text-white text-xs font-semibold rounded-full dark:bg-emerald-700">Sci-Fi</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Echoes of the Cosmos</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Journey beyond the stars to uncover the secrets of a dying galaxy. A thrilling space opera unfolds.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author 3">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author 4">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Created by Luna & Kai</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 45m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.9</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/196/800/600" alt="Image of a serene waterfall">
          <div class="absolute inset-0 bg-gradient-to-t from-lime-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-lime-600 text-white text-xs font-semibold rounded-full dark:bg-lime-700">Adventure</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">The Emerald Quest</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Embark on a perilous journey through mystical lands to find the legendary Emerald Heart.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author 5">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author 6">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">By The Wilderness Collective</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">3h 05m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.7</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Product Cards 组件

一个复杂的响应式产品卡组件，采用采用紫色/紫色配色方案的企业/专业设计，适用于新闻或专业服务产品列表。包括深色模式支持。

打开预览

                <div class="font-sans antialiased bg-purple-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 lg:py-20">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-purple-300 mb-4 sm:mb-6 leading-tight">
        Our Premium Offerings
      </h2>
      <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-400 max-w-2xl mx-auto">
        Discover a curated selection of our most advanced and robust solutions designed to empower your business.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=1" alt="Advanced Analytics Platform" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Explore Now</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Advanced Analytics Platform</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Unleash deep insights with our cutting-edge AI-powered analytics, transforming raw data into actionable knowledge.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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.25 10m-3.25 7V10m6.5 7V10m2 7V10m-2 2a2 2 0 11-4 0 2 2 0 014 0zM12 2a10 10 0 100 20 10 10 0 000-20z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Data Science</span> &middot; <time datetime="2023-10-26">Oct 26, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By John Doe</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=2" alt="Secure Cloud Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Discover Security</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Secure Cloud Infrastructure</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Fortify your digital assets with our robust, scalable, and highly secure cloud computing environments.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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="M5 13l4 4L19 7" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Cybersecurity</span> &middot; <time datetime="2023-10-25">Oct 25, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By Jane Smith</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=3" alt="Enterprise AI Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Get Started</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Enterprise AI Automation</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Revolutionize workflows and boost efficiency with intelligent automation powered by our bespoke AI models.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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.663 17h4.673M12 9v6m-3-4h6m4 0a10 10 0 11-20 0 10 10 0 0120 0z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Artificial Intelligence</span> &middot; <time datetime="2023-10-24">Oct 24, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By David Lee</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

    </div>
  </div>
</div>

Art Deco Candy 产品卡

响应式产品卡组件，具有装饰艺术风格的设计和欢快的糖果配色方案，适用于预订和预订系统。包括深色模式支持。

打开预览

                <div class="p-4 sm:p-8 bg-pink-50 dark:bg-gray-900 min-h-screen flex justify-center items-center font-serif">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl w-full">

    <!-- Product Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-pink-300 dark:border-blue-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-400 dark:from-purple-700 dark:via-blue-600 dark:to-cyan-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
        <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-pink-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>

      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-purple-600 dark:to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M8 4a3 3 0 00-3 3v2H2a2 2 0 00-2 2v5a2 2 0 002 2h16a2 2 0 002-2v-5a2 2 0 00-2-2h-3V7a3 3 0 00-3-3H8zM5 7a1 1 0 011-1h8a1 1 0 011 1v2H5V7zm10 4H5v5h10v-5z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300 mb-2 tracking-wide">Sweet Serenity</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Your moment of tranquil bliss.</p>
        
        <div class="border-t border-b border-pink-200 dark:border-blue-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 60 Mins Session</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Flexible Schedule</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-cyan-400 mb-6">$120</p>

        <button class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-purple-800 dark:to-blue-800 text-white font-bold rounded-lg shadow-lg hover:from-pink-600 hover:to-purple-600 dark:hover:from-purple-700 dark:hover:to-blue-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-blue-600">
          Book Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-mint-300 dark:border-purple-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-mint-400 via-blue-300 to-pink-400 dark:from-blue-700 dark:via-cyan-600 dark:to-purple-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-mint-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-mint-300 to-blue-300 dark:from-blue-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.672 1.911a1.102 1.102 0 011.656 0L10 3.333l1.672-1.422a1.102 1.102 0 011.656 0L14.414 4H17a1 1 0 011 1v9a1 1 0 01-1 1h-3.414l-1.656 1.422a1.102 1.102 0 01-1.656 0L10 16.667l-1.672-1.422-1.656 1.422a1.102 1.102 0 01-1.656 0L2.586 15H1a1 1 0 01-1-1V5a1 1 0 011-1h2.586l1.672-1.422zM2 6v7h16V6H2zm8 3a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-mint-600 dark:text-mint-300 mb-2 tracking-wide">Gleaming Glow</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Radiate from the inside out.</p>

        <div class="border-t border-b border-mint-200 dark:border-purple-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 90 Mins Treatment</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Weekend Slots</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-pink-500 dark:text-purple-400 mb-6">$180</p>

        <button class="w-full py-4 bg-gradient-to-r from-mint-500 to-blue-500 dark:from-blue-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-mint-600 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-mint-400 dark:focus:ring-purple-600">
          Reserve Spot
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-blue-300 dark:border-cyan-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-400 via-pink-300 to-mint-400 dark:from-cyan-700 dark:via-purple-600 dark:to-blue-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-blue-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-blue-300 to-pink-300 dark:from-cyan-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm11.59 10.37L12 18.06V20h4v-1.94l-3.59-3.69z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M8 10a2 2 0 11-4 0 2 2 0 014 0zm10.59 4.37L16 18.06V20h4v-1.94l-3.59-3.69zM12 10a2 2 0 11-4 0 2 2 0 014 0zm.59-4.37L16 2.06V0h4v1.94l-3.59 3.69z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-2 tracking-wide">Jubilee Journey</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">An unforgettable personal retreat.</p>

        <div class="border-t border-b border-blue-200 dark:border-cyan-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 120 Mins Deluxe</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Priority Booking</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-blue-400 mb-6">$250</p>

        <button class="w-full py-4 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-cyan-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-blue-600 hover:to-cyan-600 dark:hover:from-cyan-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-cyan-600">
          Schedule Now
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* This custom CSS is for the artistic border using clip-path, 
     as Tailwind currently does not support arbitrary clip-path values directly. */
  .clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  }
</style>

Neumorphic Product Cards 组件 - Retro Palette

一个复杂的响应式产品卡组件，采用柔和的 Neumorphic UI 样式设计，使用柔和的复古/复古调色板。功能包括深色模式支持、用于挤压效果的微妙阴影以及用于辅助功能的语义 HTML。适合阅读和内容消费，例如博客或内容显示。

打开预览

                <div class="p-4 sm:p-8 md:p-12 bg-lime-100 dark:bg-gray-800 min-h-screen font-sans antialiased transition-colors duration-300">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-lime-900 dark:text-gray-100 mb-8 text-center drop-shadow-sm">
    Featured Blog Posts
  </h2>

  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-10">

    <!-- Product Card 1 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/684/600/400" alt="Abstract art" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          The Art of Slow Living: Embracing Mindfulness
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Discover how to cultivate a more peaceful and intentional life by incorporating mindful practices into your daily routine. From simple breathing exercises to creating a serene home environment, this post explores practical tips for embracing the slow living movement...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Jane Doe</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 26, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 2 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/1025/600/400" alt="Mountain landscape" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Exploring Vintage Photography Techniques
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Dive into the fascinating world of analogue photography. This post covers classic techniques, from experimenting with film cameras to developing your own prints, and tips to capture that timeless, retro feel...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">John Smith</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 19, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 3 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/40/600/400" alt="Coffee and notes" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Retro Gaming Revival: A Look Back at Classics
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Join us on a nostalgic journey through the golden age of video games. From pixelated wonders to iconic consoles, we revisit the titles that defined a generation and explore their lasting impact...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Alice Brown</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 12, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

  </div>

  <!-- Tailwind CSS Customizations (typically in tailwind.config.js) -->
  <style>
    .shadow-neumorphic-light-xl {
      box-shadow: 10px 10px 20px #97ac88, -10px -10px 20px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-xl {
      box-shadow: 10px 10px 20px #4e4e4e, -10px -10px 20px #828282;
    }

    .shadow-neumorphic-light-pressed {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-pressed {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }

    .shadow-neumorphic-inset-light {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }
    
    /* Smaller, general neumorphic shadow for avatars, buttons */
    .shadow-neumorphic-light {
        box-shadow: 3px 3px 6px #97ac88, -3px -3px 6px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark {
        box-shadow: 3px 3px 6px #4e4e4e, -3px -3px 6px #828282;
    }

    /* Retro palette colors as reference: */
    /* Light Mode: */
    /* Background: --lime-100 (#ebf8dc) */
    /* Card BG: --lime-200 (#dceeb7) */
    /* Primary Text/Icons: --lime-700 (#6f8f4a), --lime-800 (#4a6a25), --lime-900 (#3d591c) */
    /* Secondary Text: --teal-700 (#4a7a7a), --teal-800 (#2a5a5a) */
    /* Button/Interactive: --lime-300 (#c8e49e) */

    /* Dark Mode: */
    /* Background: --gray-800 (#2d3748) */
    /* Card BG: --gray-700 (#4a5568) */
    /* Primary Text/Icons: --gray-100 (#f7fafc), --gray-200 (#edf2f7) */
    /* Secondary Text: --gray-300 (#e2e8f0), --gray-400 (#cbd5e0) */
    /* Button/Interactive: --gray-600 (#718096) */

    /* Note: For a real project, these custom shadows would be configured in `tailwind.config.js` 
       under the `theme.extend.boxShadow` property for reusability. 
       This inline style is for demonstration purposes within a single file. */
  </style>
</div>

拟物化产品卡组件

简单、响应式产品卡组件，具有灰度拟物化设计，适用于商业/公司网站。包括深色模式支持。

打开预览

                <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>

Product Cards 组件

产品卡用于社交媒体的组件，具有深色三元配色方案和中等复杂性。它使用 Tailwind CSS 进行响应式设计，并支持深色模式，并包含图像和头像的占位符。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
          <span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.2K Likes</span>
          <span>💬 245 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
          <span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 980 Likes</span>
          <span>💬 180 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
          <span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.5K Likes</span>
          <span>💬 300 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>