JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="lottery_steps">

  <div class="lottery_step">
    <img src="https://bonmedico.de/wp-content/uploads/2019/02/step1_lottery.png">
    <p>1. Link an Freunde versenden (max. x)</p>
  </div>

  <span class="lottery_arrow"><img class="lottery_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png"></span>

  <div class="lottery_step">
    <img src="https://bonmedico.de/wp-content/uploads/2019/02/step2_lottery.png">
    <p>1. Link an Freunde versenden (max. x)</p>
  </div>

  <span class="lottery_arrow"><img class="lottery_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png"></span>

  <div class="lottery_step">
    <img src="https://bonmedico.de/wp-content/uploads/2019/02/step3_lottery.png">
    <p>1. Link an Freunde versenden (max. x)</p>
  </div>

  <span class="lottery_arrow"><img class="lottery_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png"></span>

  <div class="lottery_step">
    <img src="https://bonmedico.de/wp-content/uploads/2019/02/step4_lottery.png">
    <p>1. Link an Freunde versenden (max. x)</p>
  </div>

  </div>

CSS

.lottery_step p {
    text-align: center;
    font-size: 18px;
}

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



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

img.lottery_arrow {
    margin-top: 40px !important;
}

.lottery_step {
    margin: auto;
}


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

  img.lottery_arrow {
      transform: rotate(90deg);
      margin-top: 10px;
      margin-bottom: 20px;
  }
}