レーティングシステムコンポーネント24
ダークテーマとレスポンシブエフェクトをサポートする3Dデザインのレーティングシステムコンポーネント。このコンポーネントは、評価、ユーザーアバター、コメントセクションの星を備えています。
HTMLコード
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<div class="flex mt-4 space-x-1">
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
<svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
<img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
</div>
</div>関連コンポーネント
レーティングシステムコンポーネント
ミニマリスト/フラットデザイン、グレースケールの配色、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたeコマース向けの複雑な評価システムコンポーネント。JavaScript はありません。画像とアバターには picsum.photos と randomuser.me を使用します。