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

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

グレースケールカラー、ダークモードのサポート、レスポンシブデザインを備えたシンプルなブルータリズムフィードバックコンポーネント。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-900 shadow-lg border-2 border-black dark:border-gray-700 p-6">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-2 border-black dark:border-gray-700 pb-2">Feedback</h2>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">John Doe</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"This article was incredibly insightful and well-written. I appreciate the clear explanations."</p>
    </div>
  </div>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">Jane Smith</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"I found a minor typo on page 3, but overall, a fantastic read!"</p>
    </div>
  </div>
  <div class="text-right">
    <button class="bg-black dark:bg-gray-700 text-white dark:text-gray-300 px-6 py-2 border-2 border-black dark:border-gray-700 font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
      Give Feedback
    </button>
  </div>
</div>

関連コンポーネント

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

ミニマリスト/フラットデザイン ダッシュボードのフィードバックコンポーネントで、補色の配色と適度な複雑さ、レスポンシブ、ダークテーマのサポートを備えています。HTMLとTailwind CSSを使用します。JavaScript はありません。インタラクティブな要素を備えています。画像はpicsum.photosから、アバターは randomuser.me から。

開ける

Non-Profit Feedback Component (非営利フィードバックコンポーネント) (3D スタイル)

非営利団体向けのシンプルで応答性の高いフィードバックコンポーネントで、3Dデザインの美学と温かみのある夕焼けの色調が特徴です。ダークモードのサポートが含まれています。

開ける

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

パステルカラーの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたブルータリストスタイルのフィードバックコンポーネント。フィードバックや推薦文を紹介するポートフォリオ用に設計されています。

開ける