JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="side-bar">
    <h1 id="ab_me">About Me</h1>

    <p id="name"><span>S</span>aksham <span>C</span>hauhan</p>
    <div id="bubble">SUP !
        <div id="bubble-arrow-border"></div>
        <div id="bubble-arrow"></div>
    </div>

CSS

div#side-bar p {
    font-size:25;
    border-bottom:2px solid red;
    position:absolute;
    left:10px;
    color:#F63737;
}
div#side-bar p:hover {
    border-bottom:2px groove #C01F1F;
    color:#C01F1F;
    text-shadow:0px 1px 2px #F98378;
    -webkit-transition:1s;
}
div#side-bar p span {
    font-size:40px;
}
div#side-bar p:hover ~ #bubble {
    display:block;
    visibility:visible;
    opacity:1;
}
div#side-bar p #bubble:hover {
    display:block;
    visibility:visible;
    opacity:1;
}
#bubble {
    opacity:0;
    visibility:hidden;
    -webkit-transition:all 1000ms;
    background-color:#EDEDED;
    border:2px solid #666666;
    font-size:35px;
    line-height:1.3em;
    padding:10px;
    position:absolute;
    text-align:center;
    width:300px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -moz-box-shadow:0 0 5px #888888;
    -webkit-box-shadow:0 0 5px #888888;
    z-index:100;
    left:230px;
    top:200px;
}
#bubble:hover {
    opacity: 1;
}
#bubble-arrow {
    border-color:transparent #EDEDED transparent transparent;
    border-style: solid;
    border-width: 15px;
    height:0;
    width:0;
    position:absolute;
    bottom:25px;
    left:-28px;
    z-index:100;
}
#bubble-arrow-border {
    border-color:transparent #666666 transparent transparent;
    border-style: solid;
    border-width: 15px;
    height:0;
    width:0;
    position:absolute;
    bottom:25px;
    left:-31px;
}