ニューモーフィズム製品比較コンポーネント
アースカラー、ダークテーマのサポート、JavaScriptなしのNeumorphismスタイルのシンプルでレスポンシブな製品比較コンポーネント。
HTMLコード
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-inner">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
</div>
</div>関連コンポーネント
製品比較コンポーネント
glassmorphism デザイン、アース トーンの配色、およびダーク モードのサポートを備えた、シンプルで応答性の高い製品比較コンポーネントです。2枚の商品カードを大きな画面で並べて表示し、小さな画面では積み重ねて表示します。
製品比較コンポーネント - 水彩/アーティスティック
工業/製造用に設計された複雑な単色の製品比較コンポーネントで、ダークモードをサポートするソフトな水彩画/芸術的な美学が特徴です。ユーザーは複数の製品を並べて比較できます。
EarthyProduct比較
3 つの商品カードを備えた、e コマース向けのレスポンシブ商品比較コンポーネント。アースカラーの配色(ブラウン、グリーン、アンバー)と、奥行きとエンゲージメントのためのシャドウやアクセントバーなどのシンプルな3Dデザイン要素を使用して、Tailwind CSSでスタイリングされています。ダークモードのサポートが含まれており、picsum.photos のプレースホルダー画像を使用します。