JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <span></span>
        <p class="title">Gold</p>
        <p class="subtitle">Starting at</p>
        <p class="price">$69.99/mo</p>
        <a href="#" class="button">More Info</a>
    </div>

CSS

#content {
    font-family: Helvetica, Serif;
    width: 440px;
    height: 460px;
    background: #EFEFEF;
    text-align: center;
    border-radius: 5px;
    -webkit-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    -moz-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    border-top:7px #F3D56A solid;
}
#content span {
    border-style: solid;
    border-width: 0 110px 110px 0;
    border-color: transparent #f3d56a transparent transparent;
    line-height: 0px;
    _border-color: #000000 #f3d56a #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    float: right;
}
.title {
    position: relative;
    left: 50px;
}
.title, .price{
    color:#2C3E50;
    font-size: 45px;
    font-weight: 700;
    text-align: center;
}
.subtitle {
    color: #7A828B;
    font-size: 30px;
    font-weight: 300;
}
a.button {
    text-decoration: none;
    color:#FFF;
    background: #F3D56A;
    padding:20px 30px;
    border-radius: 5px;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
    #content {
        width: calc(100% - 5px);
        height: 400px;
    }
    #content span {
        border-width: 0 90px 90px 0;
    }
}