Glassmorphism_Social_Media_Layout_Component
つや消しの半透明要素、ぼかし効果、補色スキームを備えたglassmorphismデザインを特徴とする、複雑でレスポンシブなソーシャルメディアレイアウトコンポーネント。サイドバー、メインコンテンツエリア、右サイドバーがあり、すべてダークモードに対応しています。
HTMLコード
<div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-700 dark:from-gray-900 dark:to-gray-800 text-white p-4 font-sans">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4">
<!-- Left Sidebar -->
<aside class="md:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
<div class="flex items-center space-x-3 mb-6">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<h1 class="text-xl font-bold text-shadow-sm">GlowNet</h1>
</div>
<nav class="space-y-4">
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
<span>Home</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>Messages</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<span>Notifications</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Profile</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span>Settings</span>
</a>
</nav>
<button class="mt-8 w-full py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-lg font-semibold transition-colors duration-300 shadow-md">
Post
</button>
</aside>
<!-- Main Content Area -->
<main class="md:col-span-3 lg:col-span-3 space-y-4">
<!-- Search Bar and Profile -->
<div class="flex flex-col sm:flex-row items-center justify-between p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
<div class="relative w-full sm:w-2/3 mb-4 sm:mb-0">
<input type="text" placeholder="Search for posts, people..." class="w-full p-3 pl-10 rounded-lg bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white text-opacity-70 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<span class="font-medium hidden sm:block">Jane Doe</span>
</div>
</div>
<!-- Create New Post -->
<div class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-full bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
</div>
<div class="flex justify-between items-center">
<div class="flex space-x-3">
<button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Photos">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</button>
<button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Video">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M17 8h4m-4 8h4M8 17h8m-1-4l4-4m-4 4l4 4m-12 0l-4-4m4 4l-4-4"></path></svg>
</button>
<button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Tag Friends">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14c-1.49 0-2.873.084-4.245.288C7.178 14.614 6 15.698 6 17v1h12v-1c0-1.302-1.178-2.386-2.755-2.612C14.873 14.084 13.49 14 12 14z"></path></svg>
</button>
</div>
<button class="px-6 py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full font-semibold transition-colors duration-300 shadow-md">
Post
</button>
</div>
</div>
<!-- Example Feed Post 1 -->
<article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<div>
<p class="font-semibold">John Smith</p>
<p class="text-sm text-white text-opacity-70 dark:text-gray-300">2 hours ago</p>
</div>
</div>
<p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Enjoying the breathtaking views from the mountains! Nature always finds a way to surprise me. #travel #nature #mountains</p>
<img src="https://picsum.photos/600/350" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
<div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>245 Likes</span>
</button>
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>32 Comments</span>
</button>
</div>
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
<span>Share</span>
</button>
</div>
</article>
<!-- Example Feed Post 2 -->
<article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/women/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<div>
<p class="font-semibold">Sarah Green</p>
<p class="text-sm text-white text-opacity-70 dark:text-gray-300">5 hours ago</p>
</div>
</div>
<p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Just finished a new piece for my portfolio! Super excited to share it with you all. What do you think? #art #digitalart #design</p>
<img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
<div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span>180 Likes</span>
</button>
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>25 Comments</span>
</button>
</div>
<button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
<span>Share</span>
</button>
</div>
</article>
</main>
<!-- Right Sidebar -->
<aside class="lg:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg hidden lg:block">
<h3 class="font-bold text-lg mb-4 text-shadow-sm">Trending Topics</h3>
<ul class="space-y-3 mb-6">
<li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#AIrevolution <span class="text-sm text-opacity-60 block">1.2M posts</span></a></li>
<li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#WebDesignTrends <span class="text-sm text-opacity-60 block">890K posts</span></a></li>
<li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#NewMusicFriday <span class="text-sm text-opacity-60 block">750K posts</span></a></li>
<li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#FitnessChallenge <span class="text-sm text-opacity-60 block">600K posts</span></a></li>
</ul>
<h3 class="font-bold text-lg mb-4 text-shadow-sm">Who to Follow</h3>
<ul class="space-y-4">
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<div>
<p class="font-medium">Emily White</p>
<p class="text-sm text-white text-opacity-70 dark:text-gray-300">@emilyart</p>
</div>
</div>
<button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<div>
<p class="font-medium">Michael Brown</p>
<p class="text-sm text-white text-opacity-70 dark:text-gray-300">@techguru</p>
</div>
</div>
<button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
<div>
<p class="font-medium">Olivia Davis</p>
<p class="text-sm text-white text-opacity-70 dark:text-gray-300">@foodieolivia</p>
</div>
</div>
<button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
</li>
</ul>
</aside>
</div>
</div>関連コンポーネント
Glassmorphismビジネスレイアウト
アース トーンを特徴とする、Tailwind CSS を使用したダーク モードをサポートする、シンプルで応答性の高い glassmorphism レイアウト コンポーネント。
ダッシュボードレイアウトコンポーネント
マテリアルデザインの美学を備えたレスポンシブダッシュボードレイアウト(サイドバー、ヘッダー、メインコンテンツエリアなど)。ダークモードをサポートし、補色を使用してバランスの取れた外観を実現します。複雑さは中程度で、純粋にCSSとTailwindクラスで実現されるインタラクティブのような機能を備えています。
レイアウトコンポーネントコンポーネント
ダークテーマのレスポンシブダッシュボードレイアウトコンポーネントで、サイドバーとメインコンテンツエリアを備えています。視覚的な魅力のためにトライアドカラースキームを使用しています。