Selectable options dashboard made with CSS

Selectable options dashboard made with CSS;

As usual, adding the plain HTML:

<section class="app">
  <i class="fa fa-rocket"></i>
  <h1>It's time to <span class="blue-color">upgrade</span></h1>
  <h3 class="gray-color">Choose the feature that best fit your needs and you'll be good to go!</h3>
  <article class="feature1">
    <input type="checkbox" id="feature1"/>
    <div>
      <span>
        20 GB<br/>
        + $15.00
      </span>
    </div>
  </article>

  <article class="feature2">
    <input type="checkbox" id="feature2"/>
    <div>
      <span>
        10 Emails<br/>
        + $10.00
      </span>
    </div>
  </article>

  <article class="feature3">
    <input type="checkbox" id="feature3"/>
    <div>
      <span>
        Support<br/>
        + $65.00
      </span>
    </div>
  </article>

  <article class="feature4">
    <input type="checkbox" id="feature4" checked/>
    <div>
      <span>
        Coffee<br/>
        $1.00
      </span>
    </div>
  </article>

  <h3>
    <span class="blue-color">50% </span>discount only today!
  </h3>

  <a href="#" class="upgrade-btn">Upgrade</a>

  <div class="gray-color">terms & conditions apply, the app will never share your private info</div>
</section>

Now doing the magic:

body {
  text-align: center;
  color: #f5f5f5;
  background-image: linear-gradient(-90deg , #0c0c0d, #1a1a1a);
  font-family: 'Roboto';
}

.app {
  max-width: 300px;
  margin: 0 auto;
}

.app i {
  font-size: 80px;

  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 1;
}

article {
  position: relative;
  width: 140px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid #50bcf2;
  box-sizing: border-box;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  transition: .5s ease;
}

article input {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

input[type=checkbox]:checked ~ div {
  background-color: #50bcf2;
}

.upgrade-btn {
  display: block;
  margin: 30px auto;
  width: 200px;
  padding: 10px 20px;
  border: 2px solid #50bcf2;
  border-radius: 50px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s ease;
}

.upgrade-btn:hover {
  background-color: #50bcf2;
}

.blue-color {
  color: #50bcf2;
}

.gray-color {
  color: #555;
}

@keyframes slidein {
  from {
    margin-top: 100%;
    width: 300%;
  }

  to {
    margin: 0%;
    width: 100%;
  }
}

What i want to cherry pick and describe is how i made the custom checkboxes:

  <article class="feature1">
    <input type="checkbox" id="feature1"/>
    <div>
      <span>
        20 GB<br/>
        + $15.00
      </span>
    </div>
  </article>

article {
  position: relative;
  width: 140px;
  height: 100px;
  margin: 5px;
  float: left;
  border: 2px solid #50bcf2;
  box-sizing: border-box;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  transition: .5s ease;
}

article input {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 100px;
  opacity: 0;
  cursor: pointer;
}

input[type=checkbox]:checked ~ div {
  background-color: #50bcf2;
}

I've created two overlapping elements inside an article, one for the checkbox and one for the container which will have the nicer look;

I made the checkbox as big as the container and I gave it an opacity 0;

Let me know what do you think.