JSFiddle - React, Tailwind, and code Playground

HTML

<div class="qqq">
                                <img src="http://chloe.promo-z.ru/pictures/news/4431.png" />
                                <a href="#">
                                    <span class="qqq-qqq">Читать</span>
                                </a>
                            </div>

CSS

.qqq {
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    line-height: 259px;
    min-height: 259px;
    position: relative;
}
.qqq img{
vertical-align: middle;    
}

.qqq a{
position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.qqq-qqq {
    color: black;
    background: #FFD400;
    transform: translateX(64%);
    font-size: 15px;
    opacity: 0.8;
    border-radius: 34px;
    padding: 10px 70px;
    font-family: Circe;
}