galaxy/Cards/sssynk_proud-emu-10.html

<div class="card">
  <p class="title">Standard</p>
  <div class="pricecontainer">
    <p class="price">$2.99</p>
    <p class="pricedescriptor">/month</p>
  </div>
  <p class="includes">This Plan Includes:</p>
  <ul class="benefitlist">
    <li>Awesome Benefits</li>
    <li>10% Discount</li>
  </ul>
  <div class="btncontainer">
    <button>Select This Plan</button>
  </div>
</div>
<style>
/* From Uiverse.io by sssynk - Tags: card */
.card {
 width: 190px;
 height: 254px;
 background: rgb(45, 45, 45);
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
 transition-duration: 0.5s;
}

.title {
 text-align: center;
 margin-top: 0.5em;
 font-weight: bold;
 font-size: x-large;
 color: rgb(200,200,200);
}

.pricecontainer {
 width: 100%;
 margin-top: 0.7em;
 background-color: rgb(30,30,30);
 box-shadow: inset 0px 0px 2em rgba(0, 0, 0, 0.3);
}

.price {
 text-align: center;
 color: rgb(180,180,180);
 font-size: x-large;
 font-weight: bold;
 padding: 0.75em 0 0 0;
}

.pricedescriptor {
 text-align: center;
 color: rgb(118, 118, 118);
 font-size: medium;
 padding: 0 0 1em 0;
}

.includes {
 text-align: center;
 color: rgb(110, 110, 110);
 margin-top: 0.6em;
 font-size: small;
 font-weight: bold;
}

.benefitlist li {
 color: rgb(150,150,150);
 font-size: small;
 text-align: center;
}

.benefitlist li:nth-child(1) {
 margin-top: 0.4em;
}

.btncontainer {
 text-align: center;
}

.btncontainer button {
 margin-top: 1em;
 padding: 0.5em 0.8em 0.5em 0.8em;
 border-style: none;
 border-radius: 1000000px;
 color: rgb(239, 239, 239);
 font-weight: bold;
 background-image: linear-gradient(45deg, #fe4fe1 0%, #3f00fe 100%);
 transition: box-shadow 0.15s ease-in-out;
}

.btncontainer button:hover {
 box-shadow: inset 0px 0px 5px rgb(0,0,0);
 transition: box-shadow 0.15s ease-in-out;
}
</style>