Composante des composantes interactives
Un composant interactif complexe pour les médias sociaux avec un design skeuomorphe et une palette de couleurs monochromatiques.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
<div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
<h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
<div class="flex items-center space-x-4 mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
<div class="flex-1">
<textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
<button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
</div>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
<div class="flex items-start space-x-3 mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
<div class="flex-1">
<p class="text-gray-200 font-semibold">Jane Doe</p>
<p class="text-gray-400">Just had a great coffee!</p>
<img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
<div class="flex space-x-4 mt-2">
<button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
Like
</button>
<button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
Comment
</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composantes interactives
Un composant Web conçu avec des éléments skeuomorphes pour les interfaces de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du thème sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception de skeuomorphisme, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript.