CCHub Logo CCHub Tailwind Collection
コンポーネント カード スキューモーフィズム カード コンポーネント

スキューモーフィズム カード コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブな Skeuomorphism スタイルのカードコンポーネント。プレースホルダー画像とアバターが含まれています。

プレビュー

HTMLコード 

<div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
    <div class="absolute bottom-0 right-0 -mb-4 mr-4">
      <img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    </div>
  </div>
  <div class="mt-6">
    <h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
    <p class="text-gray-700 dark:text-gray-300">
      This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
    </p>
  </div>
  <div class="mt-4 flex justify-between items-center">
    <span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
      Read More
    </button>
  </div>
</div>

関連コンポーネント

ArtDeco_EarthTones_Cards_Technology_SaaS

アールデコ調の幾何学模様と自然なアースカラーの配色に触発された、テクノロジー/ SaaSアプリケーション向けのシンプルでレスポンシブなカードコンポーネント。ダークモードのサポートが含まれています。

開ける

Retro_E_commerce_Cards_Component

レトロ/ビンテージの美学、アースカラー、ダークモードのサポートを備えたレスポンシブなeコマース製品カードコンポーネントで、オンラインショッピング体験に適しています。機能には、商品画像、名前、価格、コールトゥアクションボタンが含まれます。

開ける

3D カード コンポーネント

ダッシュボードに適した、3Dデザインスタイル、鮮やかな色、複数のインタラクティブ要素を備えたレスポンシブカードコンポーネント。Tailwindのダークプレフィックスを使用したダークモードをサポートします。

開ける