Section des commentaires sur le brutalisme
Un composant de section de commentaires de style brutaliste pour les portfolios, avec des couleurs analogues, une complexité modérée, une réactivité et une prise en charge du mode sombre.
HTML Code
<div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
<h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
<p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
</div>
</div>
<p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
<div class="flex justify-end text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
<a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
</div>
</div>
<!-- Comment 2 -->
<div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div>
<h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
<p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
</div>
</div>
<p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
<div class="flex justify-end text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
<a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
</div>
</div>
<!-- Add New Comment Form -->
<div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
<h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
<form>
<div class="mb-4">
<label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
Name
</label>
<input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
</div>
<div class="mb-4">
<label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
Comment
</label>
<textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
</div>
<div class="flex items-center justify-between">
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
Submit Comment
</button>
</div>
</form>
</div>
</div>
</div>Composants associés
Composant de la section des commentaires
Une section de commentaires conçue avec skeuomorphism, avec des tons de terre et un support de thème sombre, adaptée aux sites de commerce électronique.
Composant de la section des commentaires
Un composant de section de commentaires propre, inspiré du code, avec des polices monospace et des couleurs pastel, conçu pour les plateformes de divertissement/médias. Dispose d’une réactivité et d’une prise en charge du mode sombre.
Composant de la section des commentaires
Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une prise en charge du thème sombre.