JSFiddle - React, Tailwind, and code Playground

by polaszk

HTML

<div class="carouselContent">
    <div class="carouselWrapper">
      <p><span class="highlightedText">222.222</span> is your highest win in this period!</p>
      <div class="carousel">
        <div class="carouselText1">Ever wondered about total amount you won this time: <span class="highlightedText">2222</span></div>
        <div class="carouselText2"><span class="highlightedText">121</span> slots are on fire from your spins...</div>
        <div class="carouselText3">...but these were better than you, try harder ;) <span class="highlightedText">91%</span>
        </div>
      </div>
    </div>
  </div>

CSS

.carouselContent {
  margin: 0;
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carouselWrapper {
  font-size: 40px;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel {
  height: 250px;
  padding-left: 15px;
  overflow: hidden;
}

.carousel div {
  color: #fff;
  height: 250px;
  margin-bottom: 50px;
  padding: 20px 15px;
  text-align: center;
  box-sizing: border-box;
  position:relative;

}
.carousel div:before {
  content: "";
  position:absolute;
  height: 0; 
  left: -150px;
border-style: solid;
border-width: 100px 150px 100px 0;
border-color: transparent #007bff transparent transparent;
}
.carouselText1 {
  background: lightgreen;
  animation: slide 10s linear infinite;
}

.carouselText2 {
  background: skyblue;
}

.carouselText3 {
  background: lightcoral;
}

.highlightedText {
  font-weight: bold;
  display: block;
  color: #f0f304;
  text-shadow: 1px 1px 2px black;
}

@keyframes slide {
  0% {
    margin-top: -1100px;
  }

  5% {
    margin-top: -600px;
  }

  33% {
    margin-top: -600px;
  }

  38% {
    margin-top: -300px;
  }

  66% {
    margin-top: -300px;
  }

  71% {
    margin-top: 0px;
  }

  100% {
    margin-top: 0px;
  }
}