JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="container center">
    <div class="square center">
        <div class="tool-tip top">TOP</div>
        <div class="tool-tip left">LEFT</div>
        <div class="tool-tip right">RIGHT</div>
        <div class="tool-tip bottom">BOTTOM</div>
    </div>
</div>

CSS

.center {
    margin: 0 auto
}

.container {
    padding: 80px 0;
    max-width: 990px;
    border: 1px solid #CCC
}

.square {
    height: 400px;
    max-width: 500px;
    background-color: red;
    position: relative;
    display: block
}

.tool-tip {
    height: 60px;
    width: 40px;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    line-height: 60px;
    background-color: blue;
    position: absolute
}

.tool-tip.top {
    top: -60px
}

.tool-tip.left {
    left: -40px
}

.tool-tip.right {
    right: -40px;
}

.tool-tip.bottom {
    bottom: -60px
}

.tool-tip.top,
.tool-tip.bottom {
    left: 50%;
    transform: translateX(-50%)
}

.tool-tip.left,
.tool-tip.right {
    top: 50%;
    transform: translateY(-50%)
}