CCHub Logo CCHub Tailwind Collection
コンポーネント フッター フッターコンポーネント

フッターコンポーネント

Skeuomorphismスタイル、アースカラーの配色、ダークテーマのサポートを備えたレスポンシブフッターコンポーネントで、ソーシャルメディア向けに設計されています。

プレビュー

HTMLコード 

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

関連コンポーネント

ニューモーフィックバイブラントフッター

シンプルでレスポンシブなフッター コンポーネントで、ニューモルフィックなデザイン原則と鮮やかな色でスタイル付けされています。繊細な影のある柔らかく押し出された外観が特徴で、彩度の高いアクセントカラーを維持しています。フッターには、サイトナビゲーション、ソーシャルリンク、およびダークモードを完全にサポートする著作権情報の基本セクションが含まれています。

開ける

フッター コンポーネント フッター

類似の配色を使用した、微妙な Skeuomorphism デザインのシンプルなフッター コンポーネント。これには、著作権表示、いくつかのナビゲーションリンク、ソーシャルメディアアイコンが含まれています。デザインはレスポンシブで、ダークモードをサポートしています。

開ける

Skeuomorphic フッター コンポーネント

スキューモーフィックデザイン、類似の配色(緑、青緑)、およびビジネスWebサイトに適した適度な複雑さを備えたレスポンシブフッターコンポーネント。リンク、ロゴプレースホルダー、シャドウとグラデーションで実現される微妙なスキューモーフィック効果が含まれています。ライトモードとダークモードをサポートします。

開ける