<div class="billing-switcher monthly">
  <span id="month">Bill Monthly</span>
  <button><span></span></button>
  <span id="year">Bill Yearly</span>
</div>

<div class="plans">
  <div class="plan">
    <div class="plan-content">
      <div class="meta">
        <p class="price" data-y="$210" data-m="$19">$19</p>
        <p class="title">Starter</p>
        <p class="description">Just what you need to get you started.</p>     
      </div>

      <ul class="features">
        <li>1 User</li>
        <li>5 Projects</li>
      </ul>

      <a href="#" class="btn">Choose Starter</a>
    </div>
    
    <div class="shadow-1"></div>
    <div class="shadow-2"></div>
  </div>
  
  <div class="plan">
    <div class="plan-content">
      <div class="meta">
        <p class="price" data-y="$410" data-m="$39">$39</p>
        <p class="title">Pro</p>
        <p class="description">For professionals and small businesses.</p>      
      </div>

      <ul class="features">
        <li>5 Users</li>
        <li>20 Projects</li>
        <li>Secure Data Storage</li>
      </ul>

      <a href="#" class="btn highlight">Choose Pro</a>
    </div>
    
    <div class="shadow-1"></div>
    <div class="shadow-2"></div>
  </div>
  
  <div class="plan">
    <div class="plan-content">
      <div class="meta">
        <p class="price" data-y="$1700" data-m="$189">$189</p>
        <p class="title">Elite</p>
        <p class="description">For large businesses that require frequent scaling.</p>      
      </div>

      <ul class="features">
        <li>Unlimited Users</li>
        <li>Unlimited projects</li>
        <li>Secure Data Storage</li>
        <li>Included Stock Footage</li>
        <li>On-site Support</li>
      </ul>

      <a href="#" class="btn">Choose Elite</a>
    </div>
    
    <div class="shadow-1"></div>
    <div class="shadow-2"></div>
  </div>
</div>

/* Design inspired by: https://dribbble.com/shots/14674123-Daily-UI-Pricing */

/* Custom properties */
:root {
  --accent-color: #10B275;
  --secondary-color: #ECAD1D;
  --text-color: #1E1F27;
  --text-color-90: rgba(30, 31, 39, .9);
  --text-color-60: rgba(30, 31, 39, .6);
  --text-color-10: rgba(30, 31, 39, .1);
  --bg-color: #EFF6F3;
  --card-shadow-color: rgba(85, 116, 104, .05);
  --card-radius: 8px;
  --button-radius: 4px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Basic styling */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1rem + 4vw);
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 4rem;
}

/* Billing switcher */
.billing-switcher {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.billing-switcher * {
  transition: all .2s ease-in-out;
}

.yearly #month,
#year {
  color: var(--text-color-60);
}

.yearly #year {
  color: var(--text-color);
}

.billing-switcher button {
  width: 4rem;
  height: 2rem;

  background: var(--secondary-color);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, .03);
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
}

.billing-switcher button span {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: .25rem;
  top: .25rem;

  background: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.yearly button span {
  transform: translateX(2rem);
}

/* Pricing plans */
.plans {
  display: flex;
  gap: 4vw;
  align-items: flex-start;
}

.plan-content {
  background-color: white;
  border-radius: var(--card-radius);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 20rem;

  /* https://shadows.brumm.af/ */
  box-shadow: 
    0px 100px 80px rgba(0, 0, 0, 0.07), 
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--text-color-10);
  padding-bottom: 2rem;
}

.price {
  font-size: 2.441rem;
  font-weight: 100;
}

.title {
  font-size: 1.953rem;
  font-weight: 900;
}

.description {
  font-size: 1.25rem;
  color: var(--text-color-60);
}

.features {
  font-weight: 500;
  color: var(--text-color-90);
  list-style: none;
  padding: 0;
}

.features li {
  margin-bottom: 1rem;
  padding-left: 2.25rem;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2310B275' fill-opacity='0.35'/%3E%3Cpath d='M10.7172 14.8822L8.11715 12.2672C7.96095 12.1101 7.96095 11.8554 8.11715 11.6983L8.68282 11.1293C8.83903 10.9722 9.09231 10.9722 9.24851 11.1293L11 12.8909L14.7515 9.11783C14.9077 8.96072 15.161 8.96072 15.3172 9.11783L15.8828 9.68677C16.0391 9.84387 16.0391 10.0986 15.8828 10.2557L11.2828 14.8822C11.1266 15.0393 10.8734 15.0393 10.7172 14.8822V14.8822Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E%0A") no-repeat left;
}

.btn {
  display: inline-block;
  cursor: pointer;
  padding: 1rem 2rem;
  border: 1px solid var(--accent-color);
  border-radius: var(--button-radius);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: var(--accent-color);
}

.btn.highlight {
  background-color: var(--accent-color);
  color: white;
}

/* Awesome additions using CSS transforms */
/* Translate */
.plan {
  position: relative;
}

.plan :is(.shadow-1, .shadow-2) {
  background-color: var(--card-shadow-color);
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transition: transform .2s ease-in-out, width .2s ease-in-out;
}

.plan:hover .shadow-1 {
  transform: translate(-1rem, 1rem);
  width: calc(100% + 2rem);
}

.plan:hover .shadow-2 {
  transform: translate(-2rem, 2rem);
  width: calc(100% + 4rem);
}

/* Scale */
.yearly #month,
#year {
  transform: scale(.8);
}

.yearly #year {
  transform: scale(1);
}

/* Rotate */
.billing-switcher button span {
  background: white url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.58225 6.79651C0.3685 6.58276 0.25 6.30151 0.25 6.00151C0.25 5.69926 0.3685 5.41651 0.58225 5.20501L5.707 0.219756C6.00325 -0.0727435 6.48175 -0.0727435 6.778 0.219756C7.07425 0.512256 7.07425 0.987756 6.778 1.27951L1.921 6.00151L6.778 10.722C7.07425 11.0145 7.07425 11.49 6.778 11.7833C6.48175 12.0758 6.00325 12.0758 5.707 11.7818L0.58225 6.79726V6.79651Z' fill='%23ECAD1D'/%3E%3C/svg%3E%0A") no-repeat 45% center;
}

.yearly button span {
  transform: translateX(2rem) rotate(.5turn);
}

/* Skew */
.btn {
  position: relative;
  overflow: hidden;
  z-index: 100;
  transition: all .2s ease-in-out;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 0;
  height: 100%;
  background-color: var(--text-color);
  transform: skew(35deg);
  transition: width .2s ease-in-out;
  z-index: -1;
}

.btn:hover {
  color: #fff;
  border-color: var(--text-color);
}

.btn:hover::before {
  width: 120%;
}

let billingSwitcher = document.querySelector('.billing-switcher'),
  switchButton = document.querySelector('.billing-switcher button'),
  prices = document.querySelectorAll('.price');

switchButton.addEventListener('click', () => {
  billingSwitcher.classList.toggle('yearly');

  for (const price of prices) {
    if (billingSwitcher.classList.contains('yearly')) {
      price.innerHTML = price.getAttribute('data-y');
    } else {
      price.innerHTML = price.getAttribute('data-m');
    }
  } 
});