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

列コンポーネント

ポートフォリオページのレスポンシブ3Dスタイルのグレースケール列、ダークモードのサポート。

プレビュー

HTMLコード 

<section class="py-10 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
    </div>
  </div>
</section>

関連コンポーネント

列コンポーネント 49

現実世界の要素を模倣したスキューモーフィックなデザイン、ダークテーマのサポート、Tailwind CSSの使用を特徴とするレスポンシブカラムコンポーネント。

開ける

列コンポーネント

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

開ける

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

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

開ける