JSFiddle - React, Tailwind, and code Playground

by Raphael Quintao

HTML

<div class="q-tip q-tip-n">
    <div class="q-tip-arrow"></div>
    <div class="q-tip-content">Topics</div>
</div>

<div class="btns">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

CSS

.btns{
    margin-top:150px;
}
.q-tip {
    position: absolute;
    top:0;
    margin:10px;
}

.q-tip-content,
.q-tip-arrow:after {
    background-color: #e8e8e8;
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 1);
}

.q-tip-content {
    border-radius: 3px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 9;
}

.q-tip-n,
.q-tip-nw,
.q-tip-ne {
    padding-top: 20px;
}

.q-tip-s,
.q-tip-sw,
.q-tip-se {
    padding-bottom: 20px;
}

.q-tip-e {
    padding-right: 20px;
}

.q-tip-w {
    padding-left: 20px;
}

.q-tip-n .q-tip-arrow {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.q-tip-nw .q-tip-arrow {
    top: 0;
    left: 0;
}

.q-tip-ne .q-tip-arrow {
    top: 0;
    right: 0;
}

.q-tip-s .q-tip-arrow {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}

.q-tip-sw .q-tip-arrow {
    bottom: 0;
    transform: rotate(180deg);
    left: 0;
}

.q-tip-se .q-tip-arrow {
    bottom: 0;
    transform: rotate(180deg);
    right: 0;
}

.q-tip-w .q-tip-arrow {
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-25%) rotate(-90deg);
}

.q-tip-e .q-tip-arrow {
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(25%) rotate(90deg);
}

.q-tip-arrow {
    position: absolute;
    overflow: hidden;
    z-index: 10;
}

.q-tip-arrow:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    transform: translateY(50%) rotate(45deg);
    overflow: hidden;
}

JavaScript

(function($) {

    $.fn.QPlayer = function(options) {
        var settings = $.extend({
            color: "#556b2f",
            backgroundColor: "#556b2f"
        }, options);


        this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });

        return this;
    };

}(jQuery));