Neon_Glow_Comments_Section
Un composant de section de commentaires réactif avec une esthétique néon / lueur vibrante, avec des avatars d’utilisateurs, des horodatages et un bouton de réponse. Prend en charge le mode sombre et est conçu pour les interfaces de médias sociaux.
HTML Code
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 md:p-12 lg:p-16 flex justify-center items-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden">
<!-- Neon Border Effect -->
<div class="absolute inset-0 rounded-lg pointer-events-none
before:absolute before:inset-0 before:rounded-lg before:border-2 before:border-purple-500
before:dark:border-purple-600 before:shadow-[0_0_15px_rgba(168,85,247,0.7),_inset_0_0_10px_rgba(168,85,247,0.5)]
after:absolute after:inset-0 after:rounded-lg after:border-2 after:border-pink-500
after:dark:border-pink-600 after:shadow-[0_0_15px_rgba(236,72,153,0.7),_inset_0_0_10px_rgba(236,72,153,0.5)]
before:animate-pulse after:animate-pulse-slow
dark:before:shadow-[0_0_20px_rgba(168,85,247,0.9),_inset_0_0_15px_rgba(168,85,247,0.7)]
dark:after:shadow-[0_0_20px_rgba(236,72,153,0.9),_inset_0_0_15px_rgba(236,72,153,0.7)]
"></div>
<h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center
bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500
dark:from-purple-400 dark:to-pink-400
shadow-text-glow
relative z-10">
Comments
</h2>
<!-- New Comment Input -->
<div class="mb-8 relative z-10">
<textarea class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400
border border-transparent focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:outline-none
shadow-inner shadow-purple-200 dark:shadow-purple-900/50
transition-all duration-300 ease-in-out
text-base sm:text-lg"
placeholder="Write a comment..."></textarea>
<button class="mt-4 inline-flex items-center px-6 py-3 rounded-full text-white
bg-gradient-to-r from-purple-600 to-pink-600
hover:from-purple-700 hover:to-pink-700
dark:from-purple-500 dark:to-pink-500
dark:hover:from-purple-600 dark:hover:to-pink-600
shadow-lg shadow-purple-500/50 dark:shadow-purple-800/50
hover:shadow-xl hover:shadow-purple-600/60 dark:hover:shadow-purple-700/60
transition-all duration-300 ease-in-out
font-semibold text-base sm:text-lg">
Post Comment
<svg class="ml-2 -mr-1 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="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
<!-- Comments List -->
<div class="space-y-6 relative z-10">
<!-- Comment 1 -->
<div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg
shadow-md shadow-purple-100 dark:shadow-purple-900/30
border border-transparent hover:border-purple-400 dark:hover:border-purple-600
transition-all duration-300 ease-in-out
relative group">
<img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover
border-2 border-purple-400 dark:border-purple-500
shadow-md shadow-purple-300 dark:shadow-purple-800/50"
src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div class="flex-1">
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
<p class="font-bold text-lg sm:text-xl text-purple-600 dark:text-purple-400
tracking-tight leading-tight
group-hover:text-purple-700 dark:group-hover:text-purple-300">
Jane Doe
</p>
<span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
2 hours ago
</span>
</div>
<p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
This design is absolutely stunning! The neon glow really makes it pop. Great job!
</p>
<button class="text-pink-600 dark:text-pink-400
font-semibold text-sm sm:text-base
hover:text-pink-700 dark:hover:text-pink-300
transition-colors duration-200 ease-in-out
relative
before:absolute before:w-full before:h-0.5 before:bg-pink-500 before:-bottom-1 before:left-0
before:scale-x-0 before:origin-left before:transition-transform before:duration-300
hover:before:scale-x-100">
Reply
</button>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg
shadow-md shadow-purple-100 dark:shadow-purple-900/30
border border-transparent hover:border-purple-400 dark:hover:border-purple-600
transition-all duration-300 ease-in-out
relative group">
<img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover
border-2 border-pink-400 dark:border-pink-500
shadow-md shadow-pink-300 dark:shadow-pink-800/50"
src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar">
<div class="flex-1">
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
<p class="font-bold text-lg sm:text-xl text-pink-600 dark:text-pink-400
tracking-tight leading-tight
group-hover:text-pink-700 dark:group-hover:text-pink-300">
John Smith
</p>
<span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
1 day ago
</span>
</div>
<p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
Agreed! The colors are incredibly vibrant and energetic. Perfect for a social media app.
</p>
<button class="text-purple-600 dark:text-purple-400
font-semibold text-sm sm:text-base
hover:text-purple-700 dark:hover:text-purple-300
transition-colors duration-200 ease-in-out
relative
before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0
before:scale-x-0 before:origin-left before:transition-transform before:duration-300
hover:before:scale-x-100">
Reply
</button>
<!-- Nested Reply -->
<div class="mt-4 pl-8 sm:pl-10 border-l-2 border-pink-300 dark:border-pink-700 ml-4 sm:ml-6">
<div class="flex items-start bg-gray-100 dark:bg-gray-600 p-3 sm:p-4 rounded-lg
shadow-sm shadow-pink-100 dark:shadow-pink-900/30
border border-transparent hover:border-pink-400 dark:hover:border-pink-600
transition-all duration-300 ease-in-out
relative group">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-4 object-cover
border-2 border-pink-400 dark:border-pink-500
shadow-md shadow-pink-300 dark:shadow-pink-800/50"
src="https://randomuser.me/api/portraits/women/22.jpg" alt="Avatar">
<div class="flex-1">
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-1">
<p class="font-bold text-md sm:text-lg text-pink-600 dark:text-pink-400
tracking-tight leading-tight
group-hover:text-pink-700 dark:group-hover:text-pink-300">
Sarah Green
</p>
<span class="text-xs text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
23 hours ago
</span>
</div>
<p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base mb-2 leading-relaxed">
Thanks for the feedback, John! I tried to capture that energetic feel.
</p>
<button class="text-purple-600 dark:text-purple-400
font-semibold text-xs sm:text-sm
hover:text-purple-700 dark:hover:text-purple-300
transition-colors duration-200 ease-in-out
relative
before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0
before:scale-x-0 before:origin-left before:transition-transform before:duration-300
hover:before:scale-x-100">
Reply
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Define custom keyframes for glowing text and slow pulse animation */
@keyframes text-glow {
0%, 100% { text-shadow: 0 0 5px rgba(168, 85, 247, 0.5), 0 0 10px rgba(236, 72, 153, 0.5); }
50% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(236, 72, 153, 0.8); }
}
@keyframes text-glow-dark {
0%, 100% { text-shadow: 0 0 8px rgba(168, 85, 247, 0.7), 0 0 15px rgba(236, 72, 153, 0.7); }
50% { text-shadow: 0 0 15px rgba(168, 85, 247, 1), 0 0 30px rgba(236, 72, 153, 1); }
}
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.shadow-text-glow {
animation: text-glow 3s ease-in-out infinite;
}
html.dark .shadow-text-glow {
animation: text-glow-dark 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>Composants associés
Composant de la section des commentaires
Un composant de section de commentaires réactif stylisé avec un design glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Brutalism_Rainbow_Medical_Comments_Section
Un composant complexe de section de commentaires d’inspiration brutaliste pour les applications médicales/de santé, doté d’un schéma de couleurs dégradé arc-en-ciel vibrant et d’une réactivité totale avec prise en charge du mode sombre.
Section des commentaires
Composant de la section des commentaires avec conception matérielle utilisant la palette de couleurs triadique pour les affaires/l’entreprise. Conception réactive avec prise en charge du thème sombre.