JSFiddle - React, Tailwind, and code Playground

by Stasweb

HTML

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://unpkg.com/flickity@2/dist/flickity.min.css'>


  <div class="slide--parent">
  
	<div class="parent--el">
		<div class="two--col">
			<div class="is-item has--content">
				<div class="is-item--inner">
        <h2> Почему Компания «Лик»? </h2>
					
					<hr>

     В настоящее время рынок полиграфической продукции огромен. Заказчикам бывает очень трудно определится с выбором компании,
которая устроит его на все 100%. Более того, практика показывает, что среди большого количества организаций,
работающих в сфере полиграфических услуг, есть довольно высокий процент дилетантов и просто недобросовестных компаний,
которые обещают соблазнительно низкие цены и неправдоподобные сроки, но на деле не доводят работу до конца либо качество
выпускаемой продукции оставляет желать лучшего. В итоге, результат не оправдывает ожиданий — приходится заказывать снова.
     В течение почти 20 лет работы нас выбирают за безусловное соблюдение сроков выполнения заказов, надежность, высокое
качество и четкое выполнение принятых на себя обязательств.

				</div>
			</div>
		</div>
	</div>
  
  
	<div class="parent--el">
		<div class="two--col">
			<div class="is-item has--content">
				<div class="is-item--inner">
       <h2>Соотношение цены и качества</h2>
					<hr>

  Безусловным преимуществом компании «Лик» перед другими компаниями является наиболее оптимальное соотношение в вопросе
«цена/качество», а также огромный опыт работы. Компания «Лик» была образована в 1999 году. За это время мы успешно
выполнили более 100 000 заказов, собрали широкую базу клиентов и зарекомендовали себя как надежного партнера и поставщика
в сфере полиграфических услуг на рынке Казахстана.
     Компания «Лик» всегда несет ответственность перед клиентами за качество своей работы, так как дорожит своей многолетней
безупречной репутацией. Наша компания ориентирована на...

CSS

.slide--parent { 
overflow: hidden;   
width:800px;
font-size: 12px; color: #1a1a1a;
}
.is-item { width: 750px; }

h2 {font-size: 13px; color: #1a1a1a; }
.parent--el .two--col { display: flex; align-items: center; }
figure { margin: 0; }

.is-item--inner { padding: 0em 3em; }
hr {
  margin: 0.5em 0em;
  height: 4px;
  background: #eee;
  border: none;
}

hr {
  width: 0;
  max-width: 8em;
  transition: all 2500ms ease;
}

.parent--el.is-selected .is-item--inner p {
  transform: translateY(0px);
  transition-delay: 500ms;
  position: relative;
  opacity: 1;
}

.parent--el.is-selected hr {  max-width: 8em; transition-delay: 10000ms;}

JavaScript

var slideEl = $(".slide--parent");
slideEl.flickity({
	imagesLoaded: false,
	wrapAround: true,
	autoPlay: true,
	pauseAutoPlayOnHover: true,
  setInterval: 5000
 
});