JSFiddle - React, Tailwind, and code Playground

HTML

<div class="subscription-plan-card">

  <div class="subscription-plan-card__price-row">
  
    <span class="subscription-plan-card__price">
<span class="subscription-plan-card__price-amount"><span class="subscription-plan-card__price-currency">$</span>49</span><span class="subscription-plan-card__price-period">/month</span>
    </span>
    
  </div>

  <div class="subscription-plan-card__benefits-row">
    <div class="subscription-plan-card__benefits-header">What You Will Get</div>
    <ul>
      <li>Something</li>
      <li>Something</li>
      <li>Something</li>
      <li>Something</li>
    </ul>
  </div>

  <div class="subscription-plan-card__button-row">
    <button class="subscription-plan-card__button">Pre-order now</button>
  </div>

</div>

SCSS

.subscription-plan-card {
  $self: &;
  $gap: 20px;
  $text-color: #fff;
  $text-translucent-color: transparentize(#fff, .5);
  $border-color: transparentize(#fff, .75);
  $background-color: #2C3039;
  
  background-color: $background-color;
  color: $text-color;
  padding: $gap;
  max-width: 300px;
  font-size: 13px;
  margin: 0 auto;

  & > * + * {
    margin-top: $gap;
  }

  @at-root #{$self}__price-row {
    padding-bottom: $gap;
    border-bottom: 1px solid $border-color;
  }

  @at-root #{$self}__price {
    letter-spacing: .05em;
    white-space: nowrap;
  }

  @at-root #{$self}__price-amount {
    font-size: 24px;

    @at-root #{$self}__price-currency {
      color: $text-translucent-color;
    }
    
  }

  @at-root #{$self}__price-period {
    opacity: .5;
  }

  @at-root #{$self}__benefits-row {
    
  }
  
  @at-root #{$self}__benefits-header {
    padding-bottom: $gap;
    border-bottom: 1px solid $border-color;
  }

  @at-root #{$self}__benefits-row ul {
    color: $text-translucent-color;
  }

  @at-root #{$self}__benefits-row ul li {
    padding: 10px 0;
    border-bottom: 1px solid $border-color;
  }

  @at-root #{$self}__benefits-row ul li:before {
    content: "";
    width: 1em;
    height: .9em;
    vertical-align: -.05em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 488.878 488.878' fill='%236bd06f'%3E%3Cpath d='M143.294 340.058l-92.457-92.456L0 298.439l122.009 122.008.14-.141 22.274 22.274L488.878 98.123l-51.823-51.825z'/%3E%3C/svg%3E") no-repeat center center;
    display: inline-block;
    margin-right: 10px;
  }

  @at-root #{$self}__button-row {
    
  }

  @at-root #{$self}__button {
    display: block;
    height: 40px;
    width: 100%;
    background-color: #0984f4;
    border: 0;
    outline: 0;
    text-align: center;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    letter-spacing: .05em;
    font-size: 11px;
    text-transform: uppercase;
  }

}

/* */

*,...