style.css

body{
    background: #ccc;
}

.example{
    display: block; /* needed for transforms to work on mobile! */
    --height: 420px;
    --dislike-color: rgb(209, 18, 18);
    --like-color: #ddd;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Lockett_Pundt_%282015%29.jpg/1080px-Lockett_Pundt_%282015%29.jpg');
    background-size: cover;
    background-position: center;
    width: 290px;
    height: var(--height);
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36);
    margin: 0 auto;
    color: white;
    padding-top: calc(var(--height) - 40px);
    padding-left: 20px;
    
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 1.4em;
    cursor: grab;
    /* transform: rotate(5deg); */
    transition: box-shadow .1s;
    position: relative;
}
.example:hover{
    box-shadow: 2px 4px 12px rgba(0,0,0,0.36);
}
.example b{
    margin-right: 4px;
    font-size: 1.15em;
}

.example::before{
    content: '';
    opacity: 0;
    position: absolute;
    top: 10%;
    transform: rotate(-18deg);
    font-size: 1.4em;
    font-weight: bold;
    border: 4px solid;
    padding: 0 6px;
    line-height: 40px;
    border-radius: 5px;
}

.example.tinder-like::before{
    content: 'LIKE';
    left: 10%;
    opacity: 1;
    color: var(--like-color);
    border-color: var(--like-color);
}

.example.tinder-dislike::before{
    content: 'NOPE';
    transform: rotate(18deg);
    right: 10%;
    opacity: 1;
    color: var(--dislike-color);
    border-color: var(--dislike-color);
}