Social Share Buttons Component
Social Share Buttons Component with Retro/Vintage design, Earth tones color scheme, Simple complexity level, and Responsive design with dark theme support, for Social Media purpose using Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center space-x-4 p-4 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md">
<!-- Facebook Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12a10 10 0 009.21 9.95V14.41H9.13V12h2.08V9.39c0-2.06 1.262-3.182 3.098-3.182 1.082 0 2.007.08 2.27.116v2.485h-1.463c-1.145 0-1.362.545-1.362 1.343V12h2.738l-.356 2.41h-2.382v7.55A10.001 10.001 0 0022 12C22 6.477 17.523 2 12 2z"/>
</svg>
<span class="font-mono text-sm">Facebook</span>
</a>
<!-- Twitter Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 4.557a9.983 9.983 0 01-2.828.775A4.993 4.993 0 0022.18 2.23a9.99 9.99 0 01-3.14 1.2c-1.12-.56-2.44-1-3.77-.96a4.995 4.995 0 00-4.994 4.994c0 .39.043.77.123 1.13C8.788 8.192 5.95 6.61 3.715 4.284a4.995 4.995 0 001.55 6.656A4.98 4.98 0 013.16 10.19v.06a4.994 4.994 0 004 4.9V15a4.995 4.995 0 01-4.472 2.177 9.999 9.999 0 005.43 1.59c6.515 0 10.075-5.38 10.075-10.08v-.475c.69-.5 1.288-1.127 1.86-1.81zm-4.45 2.19a.88.88 0 00-.04.17l-.2 1.2a.88.88 0 00.15.71c.19.21.45.33.73.38l1.3.18a.88.88 0 00.15.01c.47-.06.8-.47.74-.94l-.17-1.14a.88.88 0 00-.16-.7l-.7-.7a.88.88 0 00-.7-.16l-1.23-.17a.88.88 0 00-.2 0z"/>
</svg>
<span class="font-mono text-sm">Twitter</span>
</a>
<!-- Instagram Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C8.41 2 7.98 2.01 6.61 2.07 5.24 2.13 4.36 2.32 3.62 2.65c-.73.33-1.35.78-1.97 1.4s-1.07 1.24-1.4 1.97c-.33.74-.52 1.6-.58 2.97-.07 1.37-.08 1.8-.08 5.39s.01 4.02.07 5.39c.06 1.38.25 2.26.58 2.97.33.73.78 1.35 1.4 1.97s1.24 1.07 1.97 1.4c.71.33 1.59.52 2.97.58 1.37.07 1.8.08 5.39.08s4.02-.01 5.39-.07c1.38-.06 2.26-.25 2.97-.58.73-.33 1.35-.78 1.97-1.4s1.07-1.24 1.4-1.97c.33-.71.52-1.59.58-2.97.07-1.37.08-1.8.08-5.39s-.01-4.02-.07-5.39c-.06-1.38-.25-2.26-.58-2.97-.33-.73-.78-1.35-1.4-1.97s-1.24-1.07-1.97-1.4c-.71-.33-1.59-.52-2.97-.58C16.02 2.01 15.59 2 12 2zm0 3.87c3.31 0 6.03 2.72 6.03 6.03s-2.72 6.03-6.03 6.03S5.97 15.21 5.97 12c0-3.31 2.72-6.03 6.03-6.03zm0 2.39c2.01 0 3.64 1.63 3.64 3.64s-1.63 3.64-3.64 3.64S8.36 14.01 8.36 12c0-2.01 1.63-3.64 3.64-3.64zm6.4-3.44c-.85 0-1.54.69-1.54 1.54s.69 1.54 1.54 1.54 1.54-.69 1.54-1.54-.69-1.54-1.54-1.54z"/>
</svg>
<span class="font-mono text-sm">Instagram</span>
</a>
</div>Related Components
Social Share Buttons Component
A responsive social share buttons component designed with skeuomorphic style in grayscale for blog content consumption. Includes dark mode support.
Social Share Buttons Component
Social Share Buttons Component for Dark Mode UI, uses Tailwind CSS, grayscale color scheme, simple complexity, for portfolio purpose, responsive design with dark theme support.
Social Share Buttons Component
A responsive and minimalist social share buttons component designed with a Swiss/International Typography style, using a grayscale color scheme. It's suitable for job boards or career development platforms, offering clean sharing options for various social media platforms.