Komponenten suchen

Kategorien

Komponenten Bewertungssystem

Bewertungssystem

Ermöglicht es Benutzern, Inhalte zu bewerten

Komponente des Bewertungssystems

Eine Komponente des Bewertungssystems, die im Retro-/Vintage-Stil gestaltet ist und ein komplementäres Farbschema und eine komplexe Benutzeroberfläche für Blog-Inhalte verwendet. Diese Komponente unterstützt den Dunkelmodus und reagiert mit Tailwind CSS.

Offen Vorschau

                <div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
    <div class="flex items-center justify-center mb-6">
        <img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
        <div>
            <p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
        </div>
    </div>
    <div class="flex justify-center mb-6">
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-yellow-400">★</span>
        <span class="text-gray-300">★</span>
    </div>
    <textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
    <button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
    <div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
        <span>👍 120 Likes</span>
        <span>💔 5 Dislikes</span>
    </div>
</div>

Komponente des Bewertungssystems

Eine minimalistische Flat-Design-Bewertungssystemkomponente, die für Unternehmenswebsites geeignet ist, mit einem ansprechenden Layout und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
    <div class="flex items-center space-x-2 mb-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="flex">
        <span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
        <div class="flex items-center space-x-1">
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
        </div>
    </div>
    <textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
    <button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>

Komponente des Bewertungssystems

Eine reaktionsschnelle Bewertungssystemkomponente mit Unterstützung für dunkle Themen, die in einem minimalistischen/flachen Stil mit einem pastellfarbenen Farbschema für Social-Media-Schnittstellen gestaltet ist. Es handelt sich um eine komplexe Komponente mit mehreren interaktiven Elementen.

Offen Vorschau

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4 min-h-screen">
  <div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Rate this item</h2>

    <div class="flex items-center space-x-2 mb-6">
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" 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.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" 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.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" 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.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" 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.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" 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.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-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>
    </div>

    <textarea
      class="w-full px-3 py-2 text-gray-700 dark:text-gray-200 border rounded-lg focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-600 dark:border-gray-500"
      rows="4"
      placeholder="Write your review..."
    ></textarea>

    <div class="mt-4 flex justify-end">
      <button
        class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-700"
      >
        Submit
      </button>
    </div>
  </div>
</div>

Komponente des Bewertungssystems

Eine Bewertungssystemkomponente im glassmorphic-Stil, die für Portfolios geeignet ist, in denen Arbeiten oder Produkte präsentiert werden, mit responsivem Design und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30 ring-1 ring-gray-300 dark:bg-gray-800 dark:bg-opacity-50 dark:ring-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Rate Our Work</h2>
    <div class="flex items-center mt-4">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="ml-3 text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <span class="text-gray-700 dark:text-gray-300">Your Rating:</span>
        <div class="flex mt-2">
            <label class="flex items-center cursor-pointer">
                <input type="radio" name="rating" value="1" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="2" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="3" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="4" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
            <label class="flex items-center cursor-pointer ml-1">
                <input type="radio" name="rating" value="5" class="hidden"/>
                <svg class="w-8 h-8 text-yellow-400 fill-current hover:scale-110 duration-200">
                    <polygon points="9.9,1.1 12.2,7.5 19.2,8.5 14.2,12.8 15.5,19.7 9.9,16.1 4.3,19.7 5.6,12.8 0.6,8.5 7.6,7.5 "/>
                </svg>
            </label>
        </div>
    </div>
    <div class="flex justify-center mt-4">
        <button class="px-4 py-2 text-white font-semibold bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
    </div>
    <div class="mt-5 flex justify-center dark:text-gray-400">
        <img class="w-16 h-16 rounded-full" src="https://picsum.photos/id/1015/200/200" alt="Portfolio Image">
    </div>
</div>

Komponente des Bewertungssystems

Eine responsive Webkomponente zum Bewerten von Elementen mit einem skeuomorphen Design, das reale Gegenstücke nachahmt. Geeignet für die Präsentation von Arbeiten oder Produkten in einem Portfolio.

Offen Vorschau

                <div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
    <h2 class="text-xl font-bold mb-4">Rating System</h2>
    <div class="flex items-center mb-6">
        <img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
        <div>
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-400">Product description goes here.</p>
            <div class="flex items-center mt-2">
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
                <span class="text-gray-500">(3/5)</span>
            </div>
        </div>
    </div>
    <h4 class="text-md font-semibold mb-3">User Reviews</h4>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">John Doe</span>
            <span class="text-gray-400 ml-2">5 hours ago</span>
        </div>
        <p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
    </div>
    <div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
            <span class="font-bold">Jane Smith</span>
            <span class="text-gray-400 ml-2">3 hours ago</span>
        </div>
        <p class="text-gray-300">Not what I expected, but decent quality overall.</p>
    </div>
    <div class="flex items-center justify-between mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
    </div>
</div>