JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="plan-box">

  <div class="plan-bonus">
    <img alt="" src="https://content.catchconnect.com.au/catchconnect-pub/catchconnect-images/[email protected]" />
  </div>

  <div class="plan-box-body">
    <div class="plan-currency">
      <p class="plan-price">
        <span>$</span>4.90
      </p>
      <p class="plan-description">
        30 Days Plan
      </p>
    </div>

    <div class="plan-featured">
      First 30 days, new services only
      <div>
        <svg width="15" height="13.5" viewBox="0 0 30 27">
          <path d="M30 0L0 27V.237z" fill="#C37A13" fill-rule="evenodd"></path>
        </svg>
      </div>
    </div>


    <div class="plan-details">
      <p class="plan-data">
        30 GB
      </p>
      <p class="plan-duration">
        / 30 Days
      </p>
    </div>

    <div class="plan-description1">
      <div>
        <h3>
          UNLIMITED STANDARD NATIONAL TALK & TEXT
        </h3>
      </div>
    </div>

    <div class="plan-description2">
      <div>
        <p>
          All for use in Australia <br/> Fair Go Policy applies.
        </p>
      </div>
    </div>

    <div class="plan-box-footer">
      <div>
        <a href="products/mobile/30-day-plan/4" class="plan-info-button">More info</a>
        <a href="/sign-up?pc=DV_SML01_30" class="plan-buy-button">Buy Now</a>
      </div>
    </div>
  </div>
</div>

CSS

.plan-box {
  box-sizing: border-box;
  display: flex;
  height: 522.5px;
  max-width: 320px;
  min-width: 245px;
  text-align: center;
  text-size-adjust: 100%;
  width: 320px;
  perspective-origin: 160px 261.25px;
  transform-origin: 160px 261.25px;
  flex: 1 1 0%;
  flex-flow: column nowrap;
  font: normal normal 100 normal 15px / 22.5px Trueno, sans-serif;
  margin: 0px 22.5px;
  transition: all .2s ease-in-out;
}

.plan-box:hover {
    transform: scale(1.03) !important;
  }

.plan-bonus {
  bottom: 0px;
  box-sizing: border-box;
  display: flex;
  height: 0px;
  left: 0px;
  min-height: auto;
  min-width: auto;
  position: relative;
  right: 0px;
  text-align: center;
  text-size-adjust: 100%;
  top: 0px;
  width: 320px;
  z-index: 1;
  align-items: flex-start;
  justify-content: flex-end;
  perspective-origin: 160px 0px;
  transform-origin: 160px 0px;
  font: normal normal 100 normal 15px / 22.5px Trueno, sans-serif;
  margin: 11px 0px 0px;
}

.plan-bonus img {
  bottom: 40px;
  box-sizing: border-box;
  display: block;
  height: 100px;
  left: 69px;
  max-width: 100%;
  min-height: auto;
  min-width: auto;
  position: relative;
  right: -69px;
  text-align: center;
  text-size-adjust: 100%;
  top: -40px;
  width: 100px;
  z-index: 1000;
  perspective-origin: 50px 50px;
  transform-origin: 50px 50px;
  font: normal normal 100 normal 15px / 22.5px Trueno, sans-serif;
}

.plan-box-body {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  height: 511.5px;
  min-height: auto;
  min-width: auto;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  text-size-adjust: 100%;
  width: 320px;
  column-rule-color: rgb(255, 255, 255);
  align-items: flex-start;
  perspective-origin: 160px 255.75px;
  transform-origin: 160px 255.75px;
  caret-color: rgb(255, 255, 255);
  background: rgb(12, 132, 216) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 3px solid rgb(124, 212, 30);
  border-radius: 20px 20px 20px 20px;
  flex-flow:...