JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <a href="#" class="teljes">Teljes cikk</a>
</article>
<article>
    <div>
        Donec nisi  tellus, egestas sit amet aliquet eu, suscipit vel mauris.
    </div>
    <a href="#" class="teljes">Teljes cikk</a>
</article>
<article>
    <div>
        Sed id turpis  nisl. Ut sollicitudin vestibulum adipiscing.
    </div>
    <a href="#" class="teljes">Teljes cikk</a>
</article>

CSS

body {
    background-color: #fdfbfc;
}
article {
    width: 90%;
    background-color: white;
    border-radius: 0 80px 15px 15px;
    box-shadow: 3px 4px 0 2px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 25px;
}
article div {
    padding: 18px;
}
.teljes {
    color: white;
    text-decoration: none;
    background-color: #ec008c;
    border-radius: 0 0 0 15px;
    padding: 0 50px;

    background-image: -moz-linear-gradient(bottom left,#ec008c 50%,white 50%);
    background-size: 1.2em;
    background-repeat: no-repeat;
    background-position: right;
}