JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<div class="top_sec">
      <!-- <h1>first Sec</h1> -->
      <div class="top_sec_cards">
        <div class="box1">
          <h3 class="box_heading">FREE First Class</h3>

          <p class="price">$0</p>
          <p class="price_note">come in and try a class on us</p>

          <div class="buy_btn">
            <button>
              <healcode-widget data-version="0.2" data-link-class="healcode-pricing-option-text-link" data-site-id="116554" data-mb-site-id="5734691" data-bw-identity-site="false" data-type="pricing-link" data-inner-html="Buy Now" data-service-id="100078" />
            </button>
          </div>
        </div>
        <div class="box1">
          <h3 class="box_heading">7 Day Intro Challenge</h3>

          <p class="price">$25</p>
          <p class="price_note">
            an entire week of yoga for the price of a single visit
          </p>

          <div class="buy_btn">
            <button>
              <healcode-widget data-version="0.2" data-link-class="healcode-pricing-option-text-link" data-site-id="116554" data-mb-site-id="5734691" data-bw-identity-site="false" data-type="pricing-link" data-inner-html="Buy Now" data-service-id="100081" />
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="top_sec">
      <h1>SHAREABLE</h1>
      <div class="top_sec_cards">
        <div class="box1">
          <h3 class="box_heading">10 Class Pass</h3>
          <p class="price">$199</p>
          <p class="price_note">expires 3 months from purchase date</p>
          <div class="buy_btn">
            <button>
              <healcode-widget
                data-version="0.2"
                data-link-class="healcode-pricing-option-text-link"
                data-site-id="116554"
                data-mb-site-id="5734691"
                data-bw-identity-site="false"
                data-type="pricing-link"
                data-inner-html="Buy Now"
                data-service-id="100036"
             ...

CSS

.top_sec {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 95%;
  margin: auto;
}

.top_sec h1 {
  margin: 50px 20px 10px 20px;
  font-size:40px;   
}

.top_sec_cards {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

/* new */
.box1 {
  min-width: 300px;
  max-width: 300px;
  height: 290px;
  border: 2px solid black;
  padding: 15px;
  text-align: center;
  margin: 20px 20px;
}

.box_heading {
  font-weight: 500px;
  font-size: 24px;
  font-family: Poppins;
  font-weight: 500;
  margin: 0px;
}

.price {
  font-family: Poppins;
  font-weight: 500;
  font-size: 24px;
  margin: 20px auto;
}
.price_note {
  font-family: Asap;
  font-weight: 300;
  margin-bottom: 5px;
  line-height: 27px;
  font-size: 15px;
  height: 20%;
}

.buy_btn button {
  padding: 17px 50px;
  background-color: #497c83;
  border-radius: 0.4rem;
  border: 0px solid;
  margin:10px 5px;
  color:white;
}

.buy_btn button a {
  color: white;
  font-weight: 500;
  text-decoration: none;
  text-transform: lowercase;
}

.buy_btn button:hover {
  opacity: 0.8;
}