<div class="component--pricing-list">
	<header>
		<h3>Explore current top deals</h3>
		<p>
			Check out our best deals across our product range, and get what your website needs.
		</p>
	</header>
	<ul class="pricing-list">
		<li class="active">
			<a href="#">
				<span class="title">
					Get .biz domain with 45% off
				</span>
				<span class="price">
					$4.88/yr
				</span>
				<span class="btn">
					Get started <img src="img/icon-right.svg" alt="">
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="best-price">
					Best price
				</span>
				<span class="title domain-title">
					.IO
				</span>
				<span class="price">
					$28.88/yr
					<span>Instead of $32.89/yr</span>
				</span>
				<span class="btn">
					Get started <img src="img/icon-right.svg" alt="">
				</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="title domain-title">
					.SO
				</span>
				<span class="price">
					$35.88/yr
					<span>Instead of $64.88/yr</span>
				</span>
				<span class="btn">
					Get started <img src="img/icon-right.svg" alt="">
				</span>
			</a>
		</li>
	</ul>
	<div class="action">
		<a href="#">View more</a>
	</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Nunito:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Nunito', sans-serif;

  &:focus {
    outline: 0;
  }
}

html, body {
  height: 100%;
}

body {
  background: #0F0F1B;
  display: grid;
  place-items: center;
}

.component--pricing-list {
  text-align: center;

  header {
    margin-bottom: 80px;

    h3 {
      font-size: 26px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 15px;
    }

    p {
      margin: 0 auto;
      font-size: 18px;
      color: #fff;
      line-height: 22px;
      max-width: 460px;
    }
  }

  .pricing-list {
    display: flex;
    margin: 0 -10px;

    li {
      width: 265px;
      margin: 0 10px;

      a {
        display: flex;
        padding: 35px;
        flex-direction: column;
        width: 100%;
        height: 267px;
        background: #171727;
        border-radius: 20px;
        color: #fff;
        text-align: left;
        transition: 300ms background-color;
        position: relative;

        .best-price {
          position: absolute;
          line-height: 30px;
          top: -15px;
          left: 50%;
          transform: translateX(-50%);
          height: 30px;
          background-color: #A0E0B2;
          border-radius: 30px;
          color: #171727;
          font-size: 16px;
          padding: 0 18px;
        }

        .title {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 20px;

          &.domain-title {
            margin-bottom: 35px;
          }
        }

        .price {
          font-size: 26px;
          font-weight: bold;
          line-height: 32px;

          span {
            display: block;
            font-size: 16px;
            font-weight: normal;
          }
        }

        .btn {
          font-size: 16px;
          margin-top: auto;
          display: flex;

          img {
            margin-left: 10px;
            transition: 300ms margin-left;
          }
        }

        &:hover {
          background: #242486;

          .btn img {
            margin-left: 20px;
          }
        }
      }

      &.active a {
        background: #242486;
      }
    }
  }

  .action {
    margin-top: 64px;
    text-align: center;
    a {
      display: inline-block;
      padding: 18px 45px;
      border-radius: 10px;
      font-size: 16px;
      color: #8080B9;
      border: 2px solid #1F1F35;
      transition: 300ms all;
      &:hover {
        border-color: #8080B9;
        color: #fff;
      }
    }
  }
}