JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div>
    <p>
        Если у вас возникли вопросы по этому коду, звоните мне по телефону: 555-3298. Звонок платный.
    </p>  
        <span>
            Обратная связь
        </span>
    
</div>

CSS

div {
    background: url(http://htmlbook.ru/files/feedback.jpg) no-repeat 4% 50% #333;
    width: 310px;
    height: 120px;
    color: #fff;
    position: fixed;
    bottom: 5%;
    right: 100%;
    transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out; 
    -o-transition: all 1.5s ease-in-out; 
}

div:hover {
     transform: translate(315px,0);
    -webkit-transform: translate(315px,0); 
    -o-transform: translate(315px,0);
    -moz-transform: translate(315px,0);
    -ms-transform: translate(315px,0);
    cursor: pointer;
}

p {padding: 0 0px 0 115px;}

span {
    display: block;
    background: #FFBF00;
    color: #000;
    width: 120px;
    text-align: center;
    border-radius: 0 0 5px 5px;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    position: relative;
    bottom: 52%;
    left: 84%;
}