レーティングシステムコンポーネント
レスポンシブデザインとダークテーマのサポートを備えた、作品や製品を展示するポートフォリオに適したglassmorphicスタイルの評価システムコンポーネント。
HTMLコード
<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>関連コンポーネント
Glassmorphism評価システム
ソーシャルメディアプラットフォーム向けに設計された、補色を備えたGlassmorphismスタイルの評価システム。レスポンシブレイアウトとTailwind CSSを使用したダークモードのサポートが含まれています。
レーティングシステムコンポーネント
ソーシャルメディア向けの複雑でレトロなテーマの評価システムコンポーネントで、単色の配色が特徴です。完全にレスポンシブで、ダークモードをサポートしています。このコンポーネントは、HTML と Tailwind CSS のみを使用し、JavaScript は使用しません。