CCHub Logo CCHub Tailwind Collection
コンポーネント バッジ ニューモーフィズムバッジ

ニューモーフィズムバッジ

これは、パステル調の配色を持つニューモーフィズムスタイルのバッジコンポーネントで、ポートフォリオ用に設計され、Tailwind CSSを使用しています。

プレビュー

HTMLコード 

<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

関連コンポーネント

バッジコンポーネント

マイクロインタラクションで設計されたレスポンシブバッジコンポーネントで、補色の配色とダークテーマのサポートが特徴です。ビジネスや企業のWebサイトに最適なこのコンポーネントには、ユーザーのアクションに応答する魅力的なアニメーションが含まれています。ホバー効果などの前述の視覚的な手がかりは、ユーザーエクスペリエンスを向上させます。

開ける

Glassmorphism_Grayscale_Badges_Component

グレースケールの配色を備えたシンプルでレスポンシブなglassmorphismスタイルのバッジコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークモードのサポートが含まれています。

開ける

レトロバッジ

補完的な配色を備えたビジネス/企業のWebサイト向けのレトロ/ビンテージバッジコンポーネント。シンプルなレイアウト、ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開ける