JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="gift_steps">

<div class="gift_step">
<div class="gift_step_img">
  <img src="https://bonmedico.de/wp-content/uploads/2019/02/img-steps_1.png">
  <img class="gift_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png">
</div>
  <p><span>Schritt 1</span><br>
Sichern Sie sich das Wedge Cushion mit Ihrem exklusiven Rabattcode auf Amazon</p>
  <img class="gift_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/tip-mark-1.png">
</div>



<div class="gift_step">
<div class="gift_step_img">
  <img src="https://bonmedico.de/wp-content/uploads/2019/02/img-steps_2.png">
  <img class="gift_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png">
  </div>
  <p><span>Schritt 2</span><br>
Nach dem Kauf erhalten Sie Ihre Bestellnummer von Amazon</p>
</div>



<div class="gift_step">
<div class="gift_step_img">
  <img src="https://bonmedico.de/wp-content/uploads/2019/02/img-steps_3.png">
  <img class="gift_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png">
  </div>
 <p><span>Schritt 3</span><br>
Wählen Sie Ihr Geschenk hier aus</p>
</div>

<div class="gift_step">
<div class="gift_step_img">
  <img src="https://bonmedico.de/wp-content/uploads/2019/02/img-steps_4.png">
  <img class="gift_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png">
  </div>
 <p><span>Schritt 4</span><br>
Geben Sie Ihre Amazon Bestellnummer hier ein</p>
</div>

<div class="gift_step">
<div class="gift_step_img">
  <img src="https://bonmedico.de/wp-content/uploads/2019/02/img-steps_5.png">
  </div>
 <p><span>Schritt 5</span><br>
Erhalten Sie Ihr Geschenk!</p>
</div>

</div>

CSS

#site-navigation-wrap {
    display: none;
}

.purchase_page_wrap {
  display: flex;
  margin: 100px 0;
}

.purchase_badge {
    position: absolute;
    top: 0;
    left: 0;
}

.purchase_inner_wrap {
    display: flex;
    margin: auto;
}

.purchase_page_product_inner {
    background-color: #4297aa;
    border: #4297aa solid 3px;
}

.purchase_page_product_outer p{
  text-align: center;
  font-size: 16px;
  font-family: sinkin_sans500_medium;
}

.purchase_page_product_inner p {
  color: #fff;
  text-align: center;
  font-size: 22px;
  display: block;
}

.purchase_page_plus {
    margin: 150px 40px 0 40px;
}

.purchase_page_product_inner span {
    display: block;
    font-family: sinkin_sans600_bold;
}

.purchase_page_icon {
  margin-top: 50px;
}


/*******************************/

.gift_step_img {
    display: flex;
}

.gift_step p {
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    line-height: 25px;
}

.gift_steps {
  display: flex;
  margin: auto;
}

.gift_steps img {
    display: block;
    margin: auto;
}

img.gift_arrow {
     margin: 60px 15px;
}

.gift_step {
    margin: auto;
    max-width: 200px;
    margin-top: 0;
}

.gift_steps span {
     font-family: sinkin_sans600_bold;
}

@media (max-width: 600px) {
  
  .gift_step_img {
    display: block;
    width: 50%;
}

.gift_step p {
    width: 50%;
}
  
  .gift_steps {
      display: block;
  }

  img.gift_arrow {
      transform: rotate(90deg);
      margin: 30px auto 30px auto;
  }

  .purchase_page_icon {
    text-align: center;
  }

 .purchase_page_wrap , .purchase_inner_wrap {
    display: inline-block;
  }

  .purchase_page_plus {
    text-align: center;
    margin: 40px 40px 0 40px;
}

.gift_step {
    margin: auto;
    max-width: 100%;
    margin-top: 0;
    display: flex;
}

}