検索コンポーネント

カテゴリ

製品カード

製品情報をカード形式で表示

製品カードコンポーネント - 農業/農業

農業および農業の Web サイト向けに設計されたレスポンシブ製品カードコンポーネントで、すっきりとしたタイポグラフィ、グリッドシステム、秋の色が特徴です。ダークモードのサポートが含まれています。

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

製品カードコンポーネント

水彩画/芸術的なデザイン、補色スキーム、完全なダークモードサポートを備えたシンプルでレスポンシブな製品カードで、ポートフォリオに適しています。

開けるプレビュー

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

Skeuomorphic Analogous Job Card コンポーネント

類似の配色を使用したスキューモーフィックなデザインスタイルのレスポンシブジョブカードコンポーネントで、求人掲示板やキャリア開発プラットフォームに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

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

製品カードコンポーネント

エンターテインメント/メディアプラットフォーム向けの複雑でレスポンシブな製品カードコンポーネントで、森/緑のパレットを使用した有機的/自然にインスパイアされたデザインが特徴です。ダークモードのサポートとインタラクティブな要素が含まれています。

開けるプレビュー

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

製品カードコンポーネント

紫/紫の配色を使用した企業/プロフェッショナルなデザインの複雑でレスポンシブな製品カードコンポーネントで、ニュースやプロフェッショナルサービス製品のリスティングに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

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

アールデコ調のキャンディー製品カード

アールデコ調のデザインと陽気なキャンディーの配色を備えたレスポンシブな製品カードコンポーネントで、予約および予約システムに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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製品カードコンポーネント - レトロパレット

ソフトな 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>

スキューモーフィック製品カードコンポーネント

グレースケールのスキューモーフィックデザインのシンプルでレスポンシブな製品カードコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

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

製品カードコンポーネント

ダークトライアドの配色と適度な複雑さを備えたソーシャルメディア用の製品カードコンポーネント。ダークモードをサポートするレスポンシブデザインに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>