レーティングシステムコンポーネント
Tailwind CSS を使用してブルータリズム スタイルで設計されたレスポンシブ評価システム コンポーネント。ダークテーマに対応しており、生々しく大胆なデザインでコントラストが高くなっています。
HTMLコード
<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
<div class="flex items-center justify-center mb-4">
<img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
<span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
</div>
<div class="flex justify-center">
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
<span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
</div>
<div class="mt-4">
<button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark:hover\:bg-yellow-500:hover {
background-color: #bb8d29;
}
}
</style>関連コンポーネント
Neumorphic Vibrant Rating System コンポーネント
Neumorphicスタイルと鮮やかな配色で設計された複雑でインタラクティブな評価システムコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。星評価、アップ/ダウン投票、数値表示が含まれ、完全な応答性とダークモードがサポートされています。
レトロレーティングシステムコンポーネント
eコマース向けのシンプルでレトロなスタイルの評価システムコンポーネントで、鮮やかな色とTailwind CSSを使用したダークテーマのサポートが特徴です。