CSS - nice p tag

by Jens Kühn

HTML

<p class="explanation">We have plenty of bug fixing and polishing to do still on this design. If you've emailed or tweeted or communicated with us in some way about it, I've probably seen it and have been log it all to make sure it's all addressed the best we can. Plus stay tuned for some fun new features!</p>

CSS

.explanation {
    padding: 1rem 2rem;
    border-radius: 16px;
    position: relative;
    background: -webkit-gradient(linear,left top,right top,from(#fce4ed),to(#ffe8cc));
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
    border: 10px solid #fff;
}
.explanation::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 1px solid #da1b60;
    border-radius: 8px;
    pointer-events: none;
}
.explanation::after {
    content: "Hey!";
    text-transform: uppercase;
    color: #000;
    background: #fff;
    font-weight: 700;
    top: -16px;
    left: 1rem;
    padding: 0 .5rem;
    font-size: .6rem;
    position: absolute;
    z-index: 1;
}