CCHub Logo CCHub Tailwind Collection
コンポーネント フィードバックコンポーネント Memphis_Social_Media_Feedback_Component

Memphis_Social_Media_Feedback_Component

温かみのあるニュートラルを使用したメンフィスデザインの影響を取り入れたシンプルでレスポンシブなソーシャルメディアフィードバックコンポーネントで、いいねボタンとコメントインジケーターが特徴です。ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="p-4 md:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 rounded-lg shadow-md max-w-sm mx-auto font-sans relative overflow-hidden">

  <!-- Memphis-style geometric elements -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-amber-200 dark:bg-gray-700 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg opacity-70"></div>
  <div class="absolute bottom-0 right-0 w-16 h-16 bg-red-200 dark:bg-gray-600 transform translate-x-1/3 translate-y-1/3 rounded-full opacity-70"></div>
  <div class="absolute top-1/4 right-0 w-12 h-12 bg-emerald-200 dark:bg-gray-700 transform translate-x-1/2 rounded-md opacity-70"></div>

  <div class="relative z-10 flex items-center justify-between text-gray-800 dark:text-gray-200">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 transform active:scale-95
                   bg-red-300 dark:bg-red-700 hover:bg-red-400 dark:hover:bg-red-600
                   text-white dark:text-gray-100 shadow-sm">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">Like</span>
    </button>

    <!-- Comment Count -->
    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7l-7-7V3a1 1 0 011-1h10a1 1 0 011 1v7zm-5-.05A3.001 3.001 0 0010 7a3.001 3.001 0 00-3 3c0 .828.324 1.572.85 2.12L7 14h6l.15-1.15A3.001 3.001 0 0013 9.95z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">12 Comments</span>
    </div>
  </div>
</div>

関連コンポーネント

フィードバックコンポーネントコンポーネント

e コマース向けに設計されたミニマリスト フィードバック コンポーネントで、柔らかなパステル カラー、レスポンシブ デザイン、ダーク テーマのサポートが特徴です。このコンポーネントには、入力フィールド、評価システム、送信ボタンを備えたフィードバック フォームが含まれており、すべて Tailwind CSS でスタイル設定されています。

開ける

Neon_Glow_Feedback_Component

類似の配色を使用してネオン/グローの美学を備えたコンサルティング/サービス用に設計されたフィードバックコンポーネント。機能には、光るボタン、微妙な背景のグラデーション、ダークモードのサポートが含まれます。

開ける

フィードバックコンポーネントコンポーネント

マテリアルデザインにインスパイアされたフォーラム/コミュニティプラットフォーム向けの複雑なフィードバックコンポーネントで、複数のインタラクティブ要素、補完的な配色、ダークモードのサポートによる完全な応答性を備えています。

開ける