Emma Watson
Senior UI/UX Designer
128
Posts
12K
Followers
542
Following
Senior UI/UX Designer
128
Posts
12K
Followers
542
Following
backdrop-blur-lg と半透明の背景色 (bg-white/20) による、リッチなグラスモーフィズム効果。border-white/30 による薄いボーダーと、shadow-2xl の深いドロップシャドウの組み合わせにより、カードを背景から美しく浮き上がらせます。backdrop-blur-lg を backdrop-blur-sm や backdrop-blur-xl などに変更することで、すりガラスのぼかし具合をコントロールできます。bg-white/20 の不透明度クラスを bg-white/10 や bg-white/30 に変更することで、カード自体の透明度を調整可能です。bg-black/20 や border-white/10 といったクラスに置き換えることで、ダークテーマに適したグラスモーフィズムを表現できます。<div class="flex items-center justify-center min-h-[400px] w-full rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-6">
<!-- グラスモーフィズムカード本体 -->
<div class="relative w-full max-w-sm overflow-hidden rounded-2xl bg-white/20 p-8 shadow-2xl backdrop-blur-lg border border-white/30">
<!-- 装飾用の光彩効果 -->
<div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-2xl"></div>
<div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-2xl"></div>
<div class="relative z-10 flex flex-col items-center">
<!-- プロフィール画像 -->
<div class="h-24 w-24 rounded-full overflow-hidden border-2 border-white/50 shadow-inner mb-4">
<img src="https://i.pravatar.cc/150?img=32" alt="Profile avatar" class="h-full w-full object-cover" />
</div>
<!-- ユーザー情報 -->
<h2 class="text-2xl font-bold text-white mb-1">Emma Watson</h2>
<p class="text-sm text-white/80 font-medium mb-6">Senior UI/UX Designer</p>
<!-- 統計情報 -->
<div class="flex w-full justify-between px-4 mb-6">
<div class="text-center text-white">
<p class="text-lg font-bold">128</p>
<p class="text-xs text-white/70">Posts</p>
</div>
<div class="text-center text-white">
<p class="text-lg font-bold">12K</p>
<p class="text-xs text-white/70">Followers</p>
</div>
<div class="text-center text-white">
<p class="text-lg font-bold">542</p>
<p class="text-xs text-white/70">Following</p>
</div>
</div>
<!-- アクションボタン -->
<div class="flex w-full gap-3">
<button class="flex-1 rounded-lg bg-white/20 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white/30 hover:shadow-md transition-all duration-300 border border-white/30 backdrop-blur-sm">
Message
</button>
<button class="flex-1 rounded-lg bg-indigo-600/80 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-600 hover:shadow-md transition-all duration-300 backdrop-blur-sm border border-indigo-500/50">
Follow
</button>
</div>
</div>
</div>
</div>