JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="container">
    <img  src="https://www.google.com.ua/logos/2013/vladimir_vernadskys_150th_birthday-1103005-hp.jpg" />
    <input type="text" />
    <div class="buttons">
        <div class="button">Поиск в Google<div class="tooltip">Прогуглить</div>
        </div>
        <div class="button">Мне повезёт!<div class="tooltip">Нашлось!</div>
        </div>
    </div>
</div>

CSS

.container{
    margin: 20px;
}

img, input{display: block;}

input{
    width: 90%;
    margin: auto;
    position: relative;
    top: 20px;
    
}

img{
    margin: auto;
}

.buttons{
    margin-top:40px;
    text-align: center; 
}

.button{
    display: inline;
    background: #f2f2f2;
    color: #444;
    padding: 6px;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    font-family: Verdana;
    font-size: .75em;
    cursor: pointer;
}

.button:hover{
    border: 1px solid #ccc;
    color: black;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background: #f5f5f5;
}

.button:active{
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
}

.tooltip{
    opacity: 0;
    display: inline;
    background: #f7f7f7;
    border: 1px solid #ddd;
    padding: 2px;
    font-size: .75em;
}

.button:last-child{
    margin-left: 20px;
}

.button{
    position: relative;
}

.button .tooltip{
    position: absolute;
    left: 0;
    top: 70px;
    left: -70px;
    border: 1px solid #ebebeb;
    padding: 5px 10px;
    background: white;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
}
.button:hover .tooltip{
    top: -30px;
    left: -30px;
    border-radius: 5px;
    opacity: 1;
}