JSFiddle - React, Tailwind, and code Playground

by Stasweb

HTML

<div class="slides">

<div class="text-box-index-page">
<h2>Почему Компания «Лик»?</h2>
<p>
     В настоящее время рынок полиграфической продукции огромен. Заказчикам бывает очень трудно определится с выбором компании,
которая устроит его на все 100%. Более того, практика показывает, что среди большого количества организаций,
работающих в сфере полиграфических услуг, есть довольно высокий процент дилетантов и просто недобросовестных компаний,
которые обещают соблазнительно низкие цены и неправдоподобные сроки, но на деле не доводят работу до конца либо качество
выпускаемой продукции оставляет желать лучшего. В итоге, результат не оправдывает ожиданий — приходится заказывать снова.
     В течение почти 20 лет работы нас выбирают за безусловное соблюдение сроков выполнения заказов, надежность, высокое
качество и четкое выполнение принятых на себя обязательств.
</p>
</div>

<div class="text-box-index-page">
<h2>Соотношение цены и качества</h2>
<p>
  Безусловным преимуществом компании «Лик» перед другими компаниями является наиболее оптимальное соотношение в вопросе
«цена/качество», а также огромный опыт работы. Компания «Лик» была образована в 1999 году. За это время мы успешно
выполнили более 100 000 заказов, собрали широкую базу клиентов и зарекомендовали себя как надежного партнера и поставщика
в сфере полиграфических услуг на рынке Казахстана.
     Компания «Лик» всегда несет ответственность перед клиентами за качество своей работы, так как дорожит своей многолетней
безупречной репутацией. Наша компания ориентирована на долгосрочное сотрудничество с нашими клиентами, поэтому для нас
важен не только положительный результат ежедневной работы, но и полное удовлетворение запросов заказчиков.
</p>
</div>

<div class="text-box-index-page">
<h2>Корткие сроки исполнения заказов</h2>
<p>
  Компания «Лик» располагает собственной производственной базой, насчитывающей № видов оборудования. Мы имеем устоявшиеся
связи с поставщиками качественных материалов, проверенных за...

CSS

.text-box-index-page {
width: 600px;
height: 180px;
background-color: #ffffff;
position: relative;
/*border: 2px solid #D4D4D4;*/
border-radius: 10px;
box-shadow: 0 0 4px #A9A9A9;
padding: 20px 40px;
/* float: left; */
/* margin: 10px 10px 0px 0px; */
}
@font-face { font-family: Roboto Condensed src: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);  }
.text-box-index-page h2 { font-size: 13px; color: #1a1a1a; }
.text-box-index-page p { font-size: 12px; color: #1a1a1a; font-family: 'Roboto Condensed', sans-serif; }

.slides { height: 260px; position: relative; width: 640px; }
  
@-webkit-keyframes anim_slides {
0% { opacity:0; }
6% { opacity:1; }
24% { opacity:1; }
30% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes anim_slides {
0% { opacity:0; }
6% { opacity:1; }
24% { opacity:1; }
30% { opacity:0; }
100% {opacity:0;}
}
  
.text-box-index-page{opacity:0; position:absolute; top:0;
  
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 56.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
  
-moz-animation-name: anim_slides;
-moz-animation-duration: 56.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
  

.text-box-index-page:nth-child(2), .text-box-index-page:nth-child(2){
-webkit-animation-delay: 8.0s;
-moz-animation-delay: 8.0s;
}
.text-box-index-page:nth-child(3), .text-box-index-page:nth-child(3){
-webkit-animation-delay: 16.0s;
-moz-animation-delay: 16.0s;
}
.text-box-index-page:nth-child(4), .text-box-index-page:nth-child(4){
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
}
.text-box-index-page:nth-child(5),...