JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ramka">First Letter</div>
<p class="ramka">First Letter</p>
<h1 class="ramka">First Letter</h1>

CSS

.ramka {
    position:relative;
    font-size:14px;
    font-family:"Trebuchet MS", Georgia, Arial;
    margin:0 auto;
    width:80%;
    min-height:80px;
    padding:10px;
    background:#f3f3f3;
    background:-webkit-gradient(linear,0% 20%,0% 92%,from(#f3f3f3),to(#fff),color-stop(.1,#f3f3f3));
    background:-moz-linear-gradient(0 0 270deg,#f3f3f3,#f3f3f3 10%,#fff);
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    -webkit-border-bottom-right-radius:60px 60px;
    border-bottom-right-radius:60px 60px;
    -webkit-box-shadow:-1px 2px 2px rgba(0,0,0,.2);
    box-shadow:-1px 2px 2px rgba(0,0,0,.2);
}
.ramka:before {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:25px;
    height:20px;
    -webkit-border-bottom-right-radius:30px;
    border-bottom-right-radius:30px;
    -webkit-box-shadow:-2px -2px 5px rgba(0,0,0,.3);
    box-shadow:-2px -2px 5px rgba(0,0,0,.3);
    -webkit-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
    -moz-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
    -o-transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
    transform:rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px);
}
.ramka::first-letter {
    color:#f00;
}