ユーザープロファイルコンポーネント
マイクロインタラクション、補完的な配色、ダークモードのサポート、JavaScriptなしのeコマース向けのシンプルでレスポンシブなユーザープロファイルコンポーネント。
HTMLコード
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
<p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
<button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
</div>
</div>
</div>関連コンポーネント
ユーザープロファイルコンポーネント
ニュース/ジャーナリズムWebサイト用の複雑でレスポンシブなユーザープロファイルコンポーネントで、バウハウスにインスパイアされたデザインで、明るいキャンディー/スウィートカラースキームとダークモードのサポートが特徴です。プロファイル写真、名前、タイトル、フォロワー数を含む複数のユーザープロファイルを表示し、リッチなインターフェイスのために設計されたものです。
ユーザープロファイルコンポーネント
非営利団体/慈善団体向けのレスポンシブユーザープロファイルコンポーネントで、プロフェッショナルなブルートーン、ダークモードのサポート、洗練されたタイポグラフィを備えたラグジュアリー/プレミアムデザインが特徴です。
Cyberpunk_User_Profiles_Component
サイバーパンクの美学と温かみのある夕焼けの配色を備えた、旅行/観光Webサイトに適した、複雑で応答性の高いユーザープロファイルコンポーネント。ダークモードのサポート、ネオンアクセント、インタラクティブな要素を備えています。