JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<div class="div-wrap">
                            <div class="div-txt">
                                <img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;">
                                <p class="label" style="margin-top: 15px;">Connect</p>
                                <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>

                                <img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;">
                                <p class="label" style="margin-top: 15px;">Calibrate</p>
                                <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
                            </div>
                              <div class="div-img">
                                <img src="img/mockups/2.png" title="Image 1">
                                <img src="img/mockups/3.png" title="Image 2">
                                <img src="img/mockups/5.png" title="Image 3">
                                <img src="img/mockups/6.png" title="Image 4">
                                <img src="img/mockups/7.png" title="Image 5">
                                <img src="img/mockups/8.png" title="Image 6">
                                <img src="img/mockups/9.png" title="Image 7">
                                <img src="img/mockups/10.png" title="Image 8">
                              </div>
                            <div class="div-txt">
                                <img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;">
                                <p class="label" style="color: #0065de; margin-top: 10px;">Train</p>
                                <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
                                <img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;">
                  ...

CSS

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt p.label {
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-txt:nth-child(1) p.label:nth-child(2) {
  animation-delay: 0s;
}

.div-txt:nth-child(1) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(2) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
  /*  border: 2px solid #ccc;*/
  /*  background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);*/
}

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 300px;
  margin: 0 auto;
}

@keyframes color-change {
  0%,
  25%,
  100% {
    color: black;
  }
  1%,
  24% {
    color: #ED5F8A;
 ...