Composant de mise en page des médias sociaux
Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-violet-200 via-pink-200 to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 p-4 font-sans">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-5 mb-6 flex items-center justify-between transform transition duration-500 hover:scale-105 z-10 relative" style="transform-style: preserve-3d; transition: transform 0.3s ease-out;">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold perspective-1000" style="transform: translateZ(20px);">
<span style="transform: rotateY(20deg) rotateX(10deg);">S</span>
</div>
<h1 class="text-3xl font-extrabold text-gray-800 dark:text-white tracking-tight perspective-1000" style="transform: translateZ(10px);">SocialSphere</h1>
</div>
<nav class="space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Profile
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Messages
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
</nav>
</header>
<!-- Main Content Area -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Feed -->
<main class="lg:col-span-2 space-y-6">
<!-- Post Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-1 hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 opacity-20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-pink-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
<div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Alice Wonderland</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">2 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
Exploring the magical forest today! The colors are absolutely breathtaking. Feeling so inspired by nature's beauty. #NatureLover #MagicForest #Inspiration
</p>
<img src="https://picsum.photos/seed/forest/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
<div class="flex items-center space-x-4">
<button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<span>120 Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
<span>45 Comments</span>
</button>
</div>
<button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
<!-- Post Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-[-1deg] hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-green-400 to-blue-500 opacity-20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-blue-400 dark:border-green-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
<div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Bob The Builder</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">5 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
Just finished a new project! So proud of the team and the hard work everyone put in. Building dreams, one brick at a time. #Construction #HardWork #TeamEffort
</p>
<img src="https://picsum.photos/seed/building/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
<div class="flex items-center space-x-4">
<button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<span>210 Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
<span>88 Comments</span>
</button>
</div>
<button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
</main>
<!-- Sidebar -->
<aside class="space-y-6">
<!-- User Profile Card -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 text-center transform transition duration-500 hover:scale-105 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-500 opacity-20 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile Picture" class="w-28 h-28 rounded-full mx-auto mb-4 border-4 border-indigo-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:rotate-3 hover:scale-110" style="transform: translateZ(15px);">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2" style="transform: translateZ(10px);">John Doe</h2>
<p class="text-gray-500 dark:text-gray-400 mb-4" style="transform: translateZ(8px);">@johndoe_official</p>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6" style="transform: translateZ(6px);">
Passionate digital creator, exploring new horizons and sharing my journey. Love to connect and collaborate!
</p>
<div class="flex justify-around items-center text-gray-600 dark:text-gray-300" style="transform: translateZ(4px);">
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">1.2K</span>
<span class="block text-sm">Followers</span>
</div>
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">750</span>
<span class="block text-sm">Following</span>
</div>
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">500</span>
<span class="block text-sm">Posts</span>
</div>
</div>
<button class="mt-6 bg-gradient-to-br from-purple-500 to-pink-500 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 relative z-20" style="transform: translateZ(12px);">
Edit Profile
</button>
</div>
</div>
<!-- Trending Topics Card -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-red-500 opacity-20 transform -translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4" style="transform: translateZ(10px);">🔥 Trending Topics</h3>
<ul class="space-y-3">
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#AIRevolution</span>
<span class="text-sm text-gray-500 dark:text-gray-400">150K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#FutureTech</span>
<span class="text-sm text-gray-500 dark:text-gray-400">90K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#CreativeMinds</span>
<span class="text-sm text-gray-500 dark:text-gray-400">70K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#WebDesignTrends</span>
<span class="text-sm text-gray-500 dark:text-gray-400">55K Posts</span>
</li>
</ul>
</div>
</div>
</aside>
</div>
</div>Composants associés
Composant Composants de mise en page
Un composant de mise en page réactive présentant des micro-interactions par le biais d’animations attrayantes qui répondent aux actions de l’utilisateur, avec prise en charge du mode sombre et de l’utilisation de Tailwind CSS.
Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.
Composant de mise en page 3D
Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.