JSFiddle - React, Tailwind, and code Playground

by herde2

HTML

<section class="grid">
    <div class="item text-content"><div class="marquee-rtl wow">    <!-- le contenu défilant -->
    <div>Le message que l'on veut voir défilé horizontalement...</div></div>
</div>
    <div class="item text-content">

      <div class="marque-ver">
        <div class="msg">Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</div>
      </div></div>

    <div class="item vertical"><h1>bo lbol obl bo lb ob lbob lbobloblbo</h1></div></section>

CSS

*, ::after, ::before {
    box-sizing: border-box;
}

.grid {
  position: relative;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
}

.item {
  padding: 1.5rem;
  background-color: coral;
}

.text-content {
  grid-column: 1 / 9;
}

.vertical {
  position: absolute;
  grid-column: span 4 / -1;
  grid-row: 1 / 3;
  left: 0; 
  top: 0;
  right: 0;
  bottom: 0;
}
.vertical>h1{
  margin:0;
  writing-mode: vertical-rl;
  transform: scale(-1);
  /* extra for curiosity*/
  text-shadow: 0 calc(100vh - 3.2rem) darkgreen;
  animation: indent 3s infinite linear;
  max-height: 100%;
  white-space:pre;
  overflow: hidden;
  grid-column:3;
}

@keyframes indent {
  to {
    text-indent: calc(-100vh + 3.2rem);
  }
}
}



/* On evite certains styles par défaut pour la demo */
.grid > * {
  margin: 0;
}

/* le block conteneur */
.marquee-rtl {
  max-width: 100%;                      /* largeur de la fenêtre */
  overflow: hidden;                     /* masque tout ce qui dépasse */
  height: 500px;
}
/* le bloc défilant */
.marquee-rtl.animated > :first-child {                  /* on ajoute la classe .animated */
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
  animation-duration: 15s;                 /* valeur à ajuster suivant la longueur du message */
  animation-iteration-count: infinite;  /* boucle continue */
  animation-timing-function: linear;    /* pas vraiment utile ici */
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

/*...