CCHub Logo CCHub Tailwind Collection
コンポーネント 列 列コンポーネント

列コンポーネント

小さくて魅力的なアニメーションを備えたレスポンシブカラムコンポーネントで、ダークテーマのeコマースに適しています。

プレビュー

HTMLコード 

<div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 1</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/301?random=1" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 2</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/302?random=1" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 3</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

列コンポーネント

レスポンシブ エフェクトと Tailwind CSS を使用したダーク テーマのサポートを備えたマテリアル デザイン スタイルの Columns コンポーネント。

開ける

列コンポーネントニューモーフィズム

Columns Component Neumorphism - 微妙な影を使用して背景から押し出されたように見える要素を作成するソフトな UI スタイルです。このコンポーネントはレスポンシブで、ダークテーマをサポートしています。JavaScript コードは必要ありません。ダークモードの場合、CSSのサポートで十分です。

開ける

列コンポーネント

Glassmorphismスタイル、トライアドカラースキーム、ビジネス/企業目的のシンプル複雑度を備えたレスポンシブカラムコンポーネントには、ダークモードのサポートが含まれています。

開ける