JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<section class="buy">
            <div class="buy__row">
                <h5 class="buy__title">Starter</h5>
                <strong class="buy__price_free">Free</strong>
                <div class="buy__info">
                    <div class="buy__info_item">1 Website</div>
                    <div class="buy__info_item">5 GB Hosting</div>
                    <div class="buy__info_item">Limited Support</div>
                </div>
                <button class="buy__btn">Get Started</button>   
            </div>

            
            <div class="buy__row">
                <h5 class="buy__title">Premium</h5>
                <div class="buy__price">
                    <strong class="price">$29</strong>
                    <small class="month">/mouth</small>
                </div>
                <div class="buy__info">
                    <div class="buy__info_item">10 Website</div>
                    <div class="buy__info_item">15 GB Hosting</div>
                    <div class="buy__info_item">Premium Support</div>
                </div>
                <button class="buy__btn">Get Started</button>   
            </div>


            <div class="buy__row">
                <h5 class="buy__title">Enterprise</h5>
                <div class="buy__price">
                    <strong class="price">$49</strong>
                    <small class="month">/month</small>
                </div>
                <div class="buy__info">
                    <div class="buy__info_item">Unlimited Website</div>
                    <div class="buy__info_item">50 GB Hosting</div>
                    <div class="buy__info_item">Premium Support</div>
                </div>
                <button class="buy__btn">Get Started</button>   
            </div>
        </section>

CSS

.buy {
  display: flex;
  justify-content: space-between;
  padding: 100px 0;
}

.buy__row {
  background: #F8F8F8;
  border-radius: 10px;
  padding: 31px 65px;
  max-width: 350px;
  transition: .2s;
}

.buy__title {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
}

.buy__price_free {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 60px;
  margin: 0 0 28px 0;
}

.buy__info_item {
  font-family: 'Mulish', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 50px;
  text-align: center;
  color: #696871;

}

.buy__btn {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 22px;
  color: #5454D4;
  border-radius: 10px;
  background-color: #fff;
  border: none;
  padding: 14px 56px 14px 56px;
  margin: 36px 0 0 0;

}

.price {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 60px;
}

.month {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;  
}

.buy__row:hover {
  cursor: pointer;
  background: #FF7143;
  color: #fff;
}