NeumorphismLikeReactionButtons
Responsive Like/Reaction Buttons Component for blog/content with dark theme support and Neumorphism design.
HTML Code
<div class="flex items-center justify-center p-4 dark:bg-gray-900">
<div class="flex space-x-4">
<!-- Like Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<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="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
<span>Like</span>
</button>
<!-- Celebrate Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
<span>Celebrate</span>
</button>
<!-- Insightful Button -->
<button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
<span>Insightful</span>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>Related Components
Like/Reaction Buttons Component
A responsive Like/Reaction Buttons Component with dark mode support using Tailwind CSS. It features a complementary color scheme suitable for a dashboard, with moderate complexity for interactive reaction buttons.
Skeuomorphic Reaction Buttons
A set of like and reaction buttons with a Skeuomorphic design style, supporting responsive layouts and dark mode. The buttons are implemented purely with HTML and Tailwind CSS, with no JavaScript. Dark mode is handled via CSS classes. Placeholder images are used for avatars.
Like/Reaction Buttons Component
A complex Like/Reaction Buttons Component with microinteractions, analogous color scheme, responsive design, and dark theme support, suitable for a dashboard. Uses Tailwind CSS and includes multiple interactive elements with engaging animations.