JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Чистый CSS</h2>
<div class="wrapper">
<a href="#" class="btn linkedin">Linkedin</a>
<a href="#" class="btn myspace">Myspace</a>
</div>

<h2>SASS  @extend</h2>
<div class="wrapper">
<a href="#" class="blue">Linkedin</a>
<a href="#" class="red">Myspace</a>
</div>

<h2>SASS  %placeholder selector</h2>
<div class="wrapper">
<a href="#" class="yellow">Linkedin</a>
<a href="#" class="pink">Myspace</a>
</div>

<h2>SASS  @mixin</h2>
<div class="wrapper">
<a href="#" class="gray">Linkedin</a>
<a href="#" class="green">Myspace</a>
</div>

SCSS

.wrapper {
    position:relative;
    display:block;
    width:400px;
    height:auto;
}

a {
    text-decoration:none;
    display:inline-block;
    margin-right:20px;
}

/*without SASS*/
.btn {
  border:2px solid gray;
  padding:5px 15px;
  border-radius:5px;
  color:white;
  font-weight:bold;
}

.linkedin {
    background:blue;
}

.myspace {
background:red;    
}

/*SASS @extend. .button записывается в CSS*/

.button {
  border:2px solid gray;
  padding:5px 15px;
  border-radius:5px;
  color:white;
  font-weight:bold;
}

.blue {
    @extend .button;
    background:blue;
}

.red {
    @extend .button;
    background:red;
}

/*SASS %placeholder selector. %button НЕ записывается в css*/

%button {
  border:2px solid gray;
  padding:5px 15px;
  border-radius:5px;
  color:gray;
  font-weight:bold;
}

.yellow {
    @extend %button;
    background:yellow;
}

.pink {
    @extend %button;
    background:pink;
}

/*with SASS @mixin. Не записывается в CSS, предназначен для использования переменных*/

@mixin button ($padding-vertical, $padding-horizontal, $border-radius) {
  border:2px solid gray;
  padding: $padding-vertical $padding-horizontal;
  border-radius:$border-radius;
  color:white;
  font-weight:bold;
}

.gray {
    @include button(5px, 15px, 5px);
    background:gray;
}

.green {
    @include button(5px, 15px, 5px);
    background:green;
}