JSFiddle - React, Tailwind, and code Playground

by seyenaz

HTML

<nav class="side-nav-right">
    <ul>
        <li class="bullet">
            <a data-scroll href="#center-splash"><span style="width: 66px; left: -80px;">Intro</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section1"><span style="width: 66px; left: -80px;">section1</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section2"><span style="width: 66px; left: -80px;">section2</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section3"><span style="width: 66px; left: -80px;">section3</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section4"><span style="width: 66px; left: -80px;">section4</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section5"><span style="width: 66px; left: -80px;">section5</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section6"><span style="width: 66px; left: -80px;">section6</span></a>
        </li>
        <li class="bullet">
            <a data-scroll href="#section7"><span style="width: 66px; left: -80px;">section7</span></a>
        </li>
    </ul>
</nav>

SCSS

.side-nav-right {
    display: block;
    position: fixed;
    top: 20%;
    right: 1rem;

    ul {
        list-style: none outside;

        li {
            margin-bottom: 1rem;

            a {
                color: transparent;
                display: block;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: green;
                box-shadow: inset 0.025rem 0.025rem 0.075rem red;
                vertical-align: top;

                &.active {
                    background: #808080;
                    box-shadow: none;
                }
            }

            span {
                color: black;
                position: absolute;
                background: rgba(0,0,0,0.7);
               // display: none;
                padding: 0.25rem 0.5rem;
                border-radius: 3px;
                vertical-align: middle;
                margin-top: -8px;
            }

            span:before {
                content:"";
                display:block;
                width:0;
                height:0;
                border:solid 5px;
                border-color:transparent transparent transparent rgba(0,0,0,0.7);
                position:absolute;
                right:-10px;
                top:9px
            }

            &:hover span {
                display: block;
            }
        }

        //li:first-child a>span{top:-5px}
    }
}

@media only screen and (min-width: 1025px) {
    .side-nav-right {
        top: 30%;
        right: 2rem;

        ul {
            li {
                margin-bottom: 1.5rem;

                a {
                    width: 1.25rem;
                    height: 1.25rem;
                }
            }
        }
    }
}