検索コンポーネント

カテゴリ

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

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

ユーザーからのフィードバックと通知を提供するコンポーネント

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

教育プラットフォームのフィードバックセクション用の複雑なトライアドカラーのダークモードUIで、さまざまなフィードバックタイプとインタラクティブな要素を備えています。

                <section class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto space-y-10">

    <!-- Header Section -->
    <header class="flex flex-col md:flex-row items-center justify-between pb-8 border-b border-purple-700/50 dark:border-purple-800/50">
      <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-400 dark:text-blue-300 mb-4 md:mb-0">Student Feedback Hub</h1>
      <div class="flex items-center space-x-4">
        <input type="search" placeholder="Search feedback..." class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-800 border border-teal-500/50 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-teal-400 focus:border-transparent transition duration-300">
        <button class="px-5 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
          Give New Feedback
        </button>
      </div>
    </header>

    <!-- Feedback Categories/Filter Section -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="p-5 rounded-xl bg-gradient-to-br from-blue-700 to-blue-900 dark:from-blue-800 dark:to-blue-950 shadow-xl border border-blue-600/50 dark:border-blue-700/50 text-center">
        <p class="text-blue-200 text-sm uppercas text-gray-200">Total Feedback</p>
        <p class="text-4xl font-bold mt-2 text-white">1,245</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-teal-700 to-teal-900 dark:from-teal-800 dark:to-teal-950 shadow-xl border border-teal-600/50 dark:border-teal-700/50 text-center">
        <p class="text-teal-200 text-sm uppercase text-gray-200">Positive</p>
        <p class="text-4xl font-bold mt-2 text-white">890</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-800 dark:to-purple-950 shadow-xl border border-purple-600/50 dark:border-purple-700/50 text-center">
        <p class="text-purple-200 text-sm uppercase text-gray-200">Suggestions</p>
        <p class="text-4xl font-bold mt-2 text-white">210</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-red-700 to-red-900 dark:from-red-800 dark:to-red-950 shadow-xl border border-red-600/50 dark:border-red-700/50 text-center">
        <p class="text-red-200 text-sm uppercase text-gray-200">Concerns</p>
        <p class="text-4xl font-bold mt-2 text-white">145</p>
      </div>
    </div>

    <!-- Main Feedback Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Left Sidebar - Filters & Categories -->
      <aside class="md:col-span-1 space-y-6">
        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-blue-400 dark:text-blue-300">Filter by Category</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-700/50 hover:bg-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Course Content <span class="text-xs bg-purple-600 px-2 py-1 rounded-full text-white">80</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Instructor Performance <span class="text-xs bg-teal-600 px-2 py-1 rounded-full text-white">65</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Platform Usability <span class="text-xs bg-blue-600 px-2 py-1 rounded-full text-white">40</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Technical Support <span class="text-xs bg-red-600 px-2 py-1 rounded-full text-white">15</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">General <span class="text-xs bg-gray-600 px-2 py-1 rounded-full text-white">120</span></a></li>
          </ul>
        </div>

        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-purple-400 dark:text-purple-300">Filter by Rating</h3>
          <div class="flex items-center space-x-3 mb-3">
            <input type="range" min="1" max="5" value="4" class="flex-grow h-2 rounded-lg appearance-none cursor-pointer bg-blue-600/50 dark:bg-blue-700/50 accent-blue-500">
            <span class="text-gray-300">4+ Stars</span>
          </div>
          <ul class="space-y-2">
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">5 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500" checked> <span class="text-gray-300">4 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">3 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">2 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">1 Star</span></label></li>
          </ul>
        </div>
      </aside>

      <!-- Right Content - Feedback Cards -->
      <div class="md:col-span-2 space-y-6">

        <!-- Feedback Card 1 (Positive) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-teal-600/50 dark:border-teal-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-600">
              <div>
                <h4 class="font-semibold text-white">Alex Johnson</h4>
                <p class="text-sm text-gray-400">Course: Advanced CSS & Tailwind</p>
              </div>
            </div>
            <div class="text-teal-400 flex items-center space-x-1">
              <span>5</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"This course was absolutely fantastic! The explanations were clear, and the hands-on projects really solidified my understanding of Tailwind CSS. Highly recommend it to anyone looking to master modern web design."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#CourseContent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Excellent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Practical</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 2 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 2 (Suggestion) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-purple-600/50 dark:border-purple-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-600">
              <div>
                <h4 class="font-semibold text-white">Sarah Chen</h4>
                <p class="text-sm text-gray-400">Course: JavaScript Fundamentals</p>
              </div>
            </div>
            <div class="text-purple-400 flex items-center space-x-1">
              <span>4</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"The JS course is solid, but I think adding more interactive coding challenges directly within the platform would significantly enhance the learning experience. Sometimes switching between platforms disrupts the flow."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#PlatformUsability</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Suggestion</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Engagement</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 5 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 3 (Concern/Bug Report) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-red-600/50 dark:border-red-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-600">
              <div>
                <h4 class="font-semibold text-white">Marcus Hill</h4>
                <p class="text-sm text-gray-400">Course: Data Structures & Algorithms</p>
              </div>
            </div>
            <div class="text-red-400 flex items-center space-x-1">
              <span>2</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"I've encountered multiple broken links in the 'Further Reading' section of Module 3. It's frustrating to try and access resources only to find they're unavailable. Please update these links."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#TechnicalSupport</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#BrokenLinks</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#Urgent</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 1 week ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

      </div>
    </div>

    <!-- Pagination / Load More -->
    <div class="flex justify-center mt-10">
      <button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
        Load More Feedback
      </button>
    </div>

  </div>
</section>

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

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

開けるプレビュー

                <div class="flex justify-center items-center px-4 py-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-gray-950 dark:to-gray-800 min-h-screen font-sans">
  <div class="relative w-full max-w-md p-6 sm:p-8 bg-white rounded-xl shadow-xl transform transition-all duration-300 ease-in-out dark:bg-gray-800 dark:shadow-2xl dark:shadow-amber-900/20 card-3d">
    <!-- 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-orange-100 to-amber-200 rounded-xl opacity-0 transform translate-z-10 dark:from-gray-700 dark:to-gray-900 blur-sm card-3d-inner"></div>
    <div class="absolute inset-0 bg-orange-50 rounded-xl opacity-0 transform translate-z-20 dark:bg-gray-600 blur-xs card-3d-inner"></div>

    <div class="relative z-10 text-center">
      <div class="mb-6">
        <svg class="mx-auto h-12 w-12 text-orange-500 dark:text-amber-400 transform -rotate-12 translate-y-1 block" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
        <h3 class="mt-3 text-2xl font-extrabold text-orange-700 dark:text-amber-300 tracking-tight leading-tight origin-left scale-105">
          Share Your Thoughts
        </h3>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          Help us improve our cause with your valuable feedback.
        </p>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="Your Email Address">
        </div>
        <div>
          <label for="feedback" class="sr-only">Your Feedback</label>
          <textarea id="feedback" name="feedback" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 resize-y transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="What do you think?"></textarea>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 transform active:scale-95 transition-all duration-200 ease-in-out origin-center button-3d">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<style>
/* Basic 3D Card effect */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d:hover .card-3d-inner:nth-child(1) {
  opacity: 1;
  transform: translateZ(-20px);
}

.card-3d:hover .card-3d-inner:nth-child(2) {
  opacity: 1;
  transform: translateZ(-40px);
}

/* Subtle 3D for inputs */
.3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
}
.dark .3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.3d-input:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: #f97316; /* Tailwind orange-500 */
}

.dark .3d-input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.5);
  border-color: #fcd34d; /* Tailwind amber-300 */
}

/* 3D Button effect */
.button-3d {
  transform: translateZ(0);
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.button-3d:hover {
  transform: translateY(-2px) translateZ(5px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-3d:active {
  transform: translateY(1px) translateZ(-5px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dark .button-3d {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark .button-3d:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dark .button-3d:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

</style>

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

ビジネス/企業Webサイト向けの複雑で応答性の高いフィードバックおよび紹介文セクションは、ダークモードUIとパステルカラースキームで設計されています。推薦文、お問い合わせフォーム、評価表示など、複数のインタラクティブ要素が含まれています。

開けるプレビュー

                <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900 dark:bg-gray-950 text-gray-200 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-blue-200 dark:text-blue-300">
      What Our Clients Say
    </h2>

    <!-- Testimonials Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
      <div class="bg-purple-800 dark:bg-purple-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-purple-400 dark:border-purple-300" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-purple-100 dark:text-purple-200">"Their dedication to quality and innovative solutions is unparalleled. We saw significant growth after implementing their strategies."</p>
        <p class="font-semibold text-purple-300 dark:text-purple-400">John Doe, CEO of InnovateCorp</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-blue-800 dark:bg-blue-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-blue-400 dark:border-blue-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-blue-100 dark:text-blue-200">"The partnership has been incredibly smooth. Their team is highly responsive and delivered beyond our expectations."</p>
        <p class="font-semibold text-blue-300 dark:text-blue-400">Jane Smith, Marketing Director at GrowthCo</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-teal-800 dark:bg-teal-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-teal-400 dark:border-teal-300" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-teal-100 dark:text-teal-200">"An absolute pleasure to work with. They transformed our digital presence and boosted our ROI significantly."</p>
        <p class="font-semibold text-teal-300 dark:text-teal-400">David Lee, Founder of DigitalEdge</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
    </div>

    <!-- Overall Rating Section -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 mb-16 text-center transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl font-bold mb-4 text-pink-200 dark:text-pink-300">Overall Customer Satisfaction</h3>
      <div class="flex items-center justify-center mb-4">
        <span class="text-6xl font-extrabold text-pink-300 dark:text-pink-400 mr-4">4.9</span>
        <div class="flex text-yellow-300 dark:text-yellow-400">
          <svg class="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
      <p class="text-lg text-gray-300 dark:text-gray-400">Based on 1500+ reviews across various platforms</p>
    </div>

    <!-- Feedback Form -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 lg:p-12 transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-8 text-green-200 dark:text-green-300">Share Your Experience</h3>
      <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:col-span-1">
          <label for="name" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Name</label>
          <input type="text" id="name" name="name" placeholder="Enter your name" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-1">
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Email</label>
          <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="subject" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Subject</label>
          <input type="text" id="subject" name="subject" placeholder="Subject of your feedback" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="message" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Message</label>
          <textarea id="message" name="message" rows="6" placeholder="Tell us about your experience..." class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 resize-y"></textarea>
        </div>

        <div class="md:col-span-2">
          <label for="rating" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Rate Us</label>
          <div class="flex justify-center text-yellow-300 dark:text-yellow-400 mb-6">
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star current-rating outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current text-gray-600 dark:text-gray-500 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
          </div>
        </div>

        <div class="md:col-span-2 text-center">
          <button type="submit" class="px-8 py-4 bg-green-500 dark:bg-green-600 text-white font-bold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- JavaScript for Rating functionality (optional, for interactivity demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const starsContainer = document.querySelector('.rating-star').parentNode;
      const stars = starsContainer.querySelectorAll('.rating-star');

      stars.forEach((star, index) => {
        star.addEventListener('click', () => {
          // Fill stars up to the clicked one
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseover', () => {
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseout', () => {
          // Reset to default (or last clicked state) if no star is clicked
          const currentRating = Array.from(stars).filter(s => s.querySelector('svg').classList.contains('text-yellow-300')).length || 0;
          stars.forEach((s, sIndex) => {
            if (sIndex < currentRating) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });
      });
    });
  </script>
</section>

スキューモーフィックフィードバックコンポーネント(シンプル、アーストーン)

ダッシュボード用のシンプルなスキューモーフィックフィードバックコンポーネントで、アースカラーを使用し、現実世界の要素を模倣するように設計されています。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <div class="p-4 md:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800
              border border-stone-300 dark:border-stone-900
              transform transition-all duration-300">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-16 h-16 rounded-full bg-stone-300 dark:bg-stone-600 shadow-md
                  flex items-center justify-center p-0.5 border border-stone-400 dark:border-stone-500">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full rounded-full object-cover
                    shadow-inner border border-stone-200 dark:border-stone-700">
        <span class="absolute bottom-0 right-0 w-4 h-4 bg-lime-500 rounded-full border-2 border-white dark:border-stone-800 shadow-sm"></span>
      </div>
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">Product Manager</p>
      </div>
    </div>

    <div class="mb-6">
      <label for="feedback-text" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Your Feedback</label>
      <textarea id="feedback-text" rows="4" class="w-full px-4 py-3 rounded-xl
                 bg-stone-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200
                 shadow-inner border border-stone-200 dark:border-stone-700
                 focus:ring-2 focus:ring-amber-500 focus:border-amber-500
                 placeholder-stone-400 dark:placeholder-stone-500
                 transition-all duration-200 resize-none
                 transform focus:scale-[1.01]
                 focus:shadow-md"
                 placeholder="Share your thoughts..."></textarea>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Rating</label>
      <div class="flex items-center justify-center space-x-2">
        <!-- Star 1 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 2 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 3 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 4 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 5 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-stone-400 dark:text-stone-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-stone-200 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                     shadow-md border border-stone-300 dark:border-stone-600
                     hover:bg-stone-300 hover:dark:bg-stone-600 hover:shadow-lg
                     active:bg-stone-400 active:dark:bg-stone-800 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Cancel
      </button>
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-amber-600 dark:bg-amber-700 text-white
                     shadow-md border border-amber-700 dark:border-amber-800
                     hover:bg-amber-700 hover:dark:bg-amber-600 hover:shadow-lg
                     active:bg-amber-800 active:dark:bg-amber-900 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Submit
      </button>
    </div>
  </div>
</div>

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

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

開けるプレビュー

                <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 クラスのみを使用して表示します。

開けるプレビュー

                <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Positive Feedback -->
    <div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
      </div>
      <span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
    </div>

    <!-- Negative Feedback -->
    <div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
      </div>
      <span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
    </div>
  </div>

  <!-- Feedback Progress Bar -->
  <div class="mb-8">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
      <div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
  </div>

  <!-- Recent Feedback Activity -->
  <div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
    <ul class="space-y-4">
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
      </li>
    </ul>
  </div>
</div>

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

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

開けるプレビュー

                <div class="min-h-screen bg-pink-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-stone-800 shadow-brutalist border-4 border-stone-900 dark:border-pink-500 p-8 md:p-12 relative">
    <h2 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-pink-100 mb-8 border-b-4 border-stone-900 dark:border-pink-500 pb-4 inline-block">
      Client Testimonials
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="bg-pink-200 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-pink-500 relative group">
        <p class="text-stone-800 dark:text-pink-200 text-lg mb-4 italic leading-relaxed">
          "Working with [Your Name] was an absolute game-changer for my project. Their unique vision and relentless dedication brought my ideas to life in ways I hadn

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

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

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
  </div>
  <div class="space-y-4">
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
      </div>
    </div>
  </div>
  <div class="mt-6 flex justify-center">
    <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
  </div>
</div>

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

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

開けるプレビュー

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
    <form class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
            <select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
                <option value="5">⭐⭐⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="2">⭐⭐</option>
                <option value="1">⭐</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
        </div>
        <div>
            <button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
        </div>
    </form>
    <div class="mt-6 flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
        <span class="text-gray-600 dark:text-gray-400">John Doe</span>
    </div>

    <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
    </div>
</div>

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

Skeuomorphismにインスパイアされたフィードバックコンポーネントで、ダッシュボードの類似の配色が特徴です。シンプルで応答性が高く、Tailwind CSSを使用したダークモードをサポートするように設計されています。shadcn/ui を使用して、スタイリングとコンポーネントを強化します。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Financial Analyst</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    The new dashboard features are excellent! The data visualization is clear and concisely presented, making it much easier to track key metrics. The performance has also improved significantly.
  </p>
  <div class="flex items-center text-yellow-500">
    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.309l6.572-.955L10 0l2.939 5.354 6.572.955-4.756 4.936 1.123 6.545z"/>
    </svg>
    <span>4.5</span>
  </div>
</div>