Minimal Text Links
A copy-paste social share component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Social ShareHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-shr-txt">
<span class="nuda-shr-txt__label">Share this article</span>
<div class="nuda-shr-txt__links">
<a href="#" class="nuda-shr-txt__link">Twitter</a>
<span class="nuda-shr-txt__dot"></span>
<a href="#" class="nuda-shr-txt__link">Facebook</a>
<span class="nuda-shr-txt__dot"></span>
<a href="#" class="nuda-shr-txt__link">LinkedIn</a>
<span class="nuda-shr-txt__dot"></span>
<a href="#" class="nuda-shr-txt__link nuda-shr-txt__link--accent">Copy link</a>
</div>
</div>CSS
.nuda-shr-txt {
display: flex;
flex-direction: column;
gap: .4rem;
padding: .5rem;
}
.nuda-shr-txt__label {
color: #777;
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
}
.nuda-shr-txt__links {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
}
.nuda-shr-txt__link {
color: #cfcfcf;
font-size: .82rem;
text-decoration: none;
transition: color .15s;
}
.nuda-shr-txt__link:hover {
color: #fafafa;
text-decoration: underline;
}
.nuda-shr-txt__link--accent {
color: #e4ff54;
}
.nuda-shr-txt__link--accent:hover {
color: #f0ff7a;
}
.nuda-shr-txt__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: #444;
flex-shrink: 0;
}
How to use Minimal Text Links
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.