タグクラウドコンポーネント13
Neumorphism スタイルでデザインされたタグクラウドコンポーネント。ソフトな UI スタイルが特徴で、微妙な影を使用して背景から押し出されているように見える要素があります。このコンポーネントは、レスポンシブデザインとダークテーマをサポートしています。
HTMLコード
<div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 1
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 2
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 3
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 4
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 5
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 6
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 7
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 8
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 0.5);
}
</style>関連コンポーネント
Retro Tag Cloud コンポーネント
Tailwind CSSを使用したレスポンシブタグクラウドコンポーネントで、レトロ/ビンテージデザインの美学、パステルカラーの配色、シンプルな複雑さを備えています。ダークモードのサポートを含むポートフォリオに適しています。
タグクラウドコンポーネント
Neumorphism デザイン スタイル、レスポンシブ エフェクト、Tailwind CSS を使用したダーク テーマのサポートを備えたタグ クラウド コンポーネント。