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

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

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

プレビュー

HTMLコード 

<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>

関連コンポーネント

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

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

開ける

Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

鮮やかで彩度の高い配色とダークモードのサポートを備えた、食品/レストランのWebサイト向けのシンプルでエレガントなフィードバックコンポーネント。豪華/プレミアムな感触のために設計されています。

開ける

Memphis_Social_Media_Feedback_Component

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

開ける