JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <a href="#" class="button">Read more</a>
  Когда мне было 25 лет, и я ходил работу искал, тимлид питерский всё время как-бы невзначай крутился возле моего компа, и всё спрашивал, что ты там затих, почему фреймворки не используешь? Первый раз я не ответил, так он начал орать, что ты там молчишь, что с тобой? Начал материться, и говорить, что вообще не возьмет к себе макаку такую, алсо, тимлид ругался, если я пишу и лишнего не горожу при этом, причём простые задачи надо усложнять, мотивировал это тем, что перед начальством надо отчитываться, усложнять все, и сам потом мне говорил: вот я вместо 2х строк пишу 150, и ты так делай! Однажды я программить сел, и слышу, тимлид где-то у двери встал в отдалении, ну я простой скрипт написал быстрый, и на пол накарачики присел, а там щель очень широкая снизу у двери, ну я в щель и смотрю, а там тимлид на карачиках сидит и в щель смотрит, и мне говорит: ты чё? Ебанутый? Чё ты там делаешь?
</div>

CSS

.card {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 20px;

    position: relative;

    display: block;

    width: 400px;
    height: 340px;
    padding: 8px 12px 12px;

    border: 1px solid black;
    box-shadow: 0 5px 10px rgba(28, 144, 243, .5);
}
.card:hover:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';

    background-color: rgba(9, 5, 1, .85);
}
.button {
    line-height: 48px;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;

    width: 200px;
    height: 48px;
    margin: auto;

    text-align: center;
    text-decoration: none;

    color: white;
    background-color: #2980b9;
}
.card:hover .button {
    display: block;
}