A tag with no added interactions or functionality.
<div class="tag"> <span class="tag__text">BuzzFeed Blue</span> </div>
A tag you can click on.
<div class="tag"> <a href="#" class="tag__link">BuzzFeed Red</a> </div>
A tag you can delete.
<div class="tag"> <span class="tag__delete"> <svg viewBox="0 0 512 512" class="tag__delete-icon" xmlns="http://www.w3.org/2000/svg"> <path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/> </svg> </span> <span class="tag__text">BuzzFeed Red</span> </div>
A tag you can either click on or delete.
<div class="tag"> <span class="tag__delete"> <svg viewBox="0 0 512 512" class="tag__delete-icon" xmlns="http://www.w3.org/2000/svg"> <path d="M133.874 227.048L19.198 108.276C-6.4 82.68-6.4 44.796 19.198 19.198c25.597-25.597 63.48-25.597 89.078 0l114.676 114.676L337.628 19.198c25.597-25.597 68.09-25.597 93.174 0 25.597 25.597 25.597 68.09 0 93.174L316.126 227.048l114.676 114.676c25.597 25.597 25.597 63.48 0 89.078-25.597 25.597-63.48 25.597-89.078 0L227.048 316.126 112.372 430.802c-25.597 25.597-68.09 25.597-93.174 0-25.597-25.597-25.597-68.09 0-93.174l114.676-110.58z"/> </svg> </span> <a href="#" class="tag__link">BuzzFeed Red</a> </div>