JSFiddle - React, Tailwind, and code Playground

by stephane_klein

HTML

<script src="https://raw.githubusercontent.com/harobed/anchor.js/master/anchor.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
        <h1>Title 1</h1>
            
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
            eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
            Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

            <h2>Title 1.1</h2>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
                eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
                Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

            <h2 id="id-defined-manualy">Title 1.2</h2>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
                eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
                Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

            <h2>Title 1.3</h2>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
                eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
                Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

            <h2>Title 1.4</h2>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada
                fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
                eget, tempor sit amet,...

CSS

body {
    padding: 0 1.75em;
}

H1, H2, H3, H4, H5 {
    position: relative;
}

.anchor2 {
    position: absolute;
    top: 50%;
    right: -10px;
    text-decoration: none;
    color: inherit;
    opacity: 0.1;
    font-size: 16px;
    transition: opacity 0.5s linear 0s;
}

h1:hover .anchor2,
h2:hover .anchor2,
h3:hover .anchor2,
h4:hover .anchor2,
h5:hover .anchor2,
h6:hover .anchor2 {
    opacity: 1;
}

JavaScript

$(document).ready(function() {
    $('body').anchor({
        'className': 'anchor2',
        'content': '<i class="fa fa-link"></i>'
    });
});