レーティングシステムコンポーネント
Neumorphismスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えた評価システムコンポーネント。
HTMLコード
<div class='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4'><div class='w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-neumorphism dark:shadow-neumorphism-dark p-6 space-y-6'><h2 class='text-2xl font-bold text-center text-gray-800 dark:text-white'>Rate our service</h2><div class='flex items-center justify-center space-x-4'><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button><button class='text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200'><svg class='w-8 h-8 fill-current' viewBox='0 0 24 24'><path d='M12 .288l3.674 7.556 8.326 1.153-6.001 5.835 1.416 8.284L12 18.288l-7.415 3.238 1.416-8.284-6.001-5.835 8.326-1.153z'/></svg></button></div></div></div><style>.shadow-neumorphism { box-shadow: 7px 7px 15px #c7c7c7, -7px -7px 15px #ffffff; }.dark .shadow-neumorphism-dark { box-shadow: 7px 7px 15px #333, -7px -7px 15px #555; }</style>