JSFiddle - React, Tailwind, and code Playground

by SpeakeazyYT

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="col-md-12">
	<div class="main-timeline">
		 <div class="timeline">
			<a class="timeline-content">
				<div class="timeline-icon">
					<img class="img-responsive img-timeline" src="http://postroeno.bitrixstudio24.ru/images/timeline/1.png">
				</div>
				<div class="content">
					<h3 class="title">Обсуждаем концепцию</h3>
					<p class="description">
						Наш менеджер и архитектор встречаются с Вами, чтобы обсудить концепцию будущего дома
					</p>
				</div>
			</a>
		</div>
		<div class="timeline">
			<a class="timeline-content">
				<div class="timeline-icon">
					<img class="img-responsive img-timeline" src="http://postroeno.bitrixstudio24.ru/images/timeline/2.png">
				</div>
				<div class="content">
					<h3 class="title">Фиксируем бюджет</h3>
					<p class="description">
						Утверждаем техническое задание, используемые материалы и фиксируем бюджет.
					</p>
				</div>
			</a>
		</div>
		<div class="timeline">
			<a class="timeline-content">
				<div class="timeline-icon">
					<img class="img-responsive img-timeline" src="http://postroeno.bitrixstudio24.ru/images/timeline/3.png">
				</div>
				<div class="content">
					<h3 class="title">Проект и геология за наш счет!</h3>
					<p class="description">
						Заключаем предварительный договор. Проект и геология за наш счет!
					</p>
				</div>
			</a>
		</div>
		<div class="timeline">
			<a class="timeline-content">
				<div class="timeline-icon">
					<img class="img-responsive img-timeline" src="http://postroeno.bitrixstudio24.ru/images/timeline/4.png">
				</div>
				<div class="content">
					<h3 class="title">Проектируем</h3>
					<p class="description">
						Делаем проектирование. Согласовываем с Вами каждый этап и утверждаем готовый проект.
					</p>
				</div>
			</a>
		</div>
		<div class="timeline">
			<a class="timeline-content">
				<div class="timeline-icon">
					<img...

CSS

/* CSS kod pishite v etom faile, chotobi pri ustanovke obnovlenii ne bilo problem  */
/* --------------------------------------- */
/* Here you can put custom css rules for your site */

/*===== Vertical Timeline =====*/
#conference-timeline {
  position: relative;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
  display: table;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  background: #ff6d00;
  padding: 15px 23px;
  color: #fff;
  max-width: 5%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#conference-timeline .conference-center-line {
  display: flex;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, #ff6d00 8%, #ff6d00 92%, rgba(80,80,80,0) 100%);
  z-index: -1;
}
#conference-timeline .conference-timeline-content {
  padding-top: 67px;
  padding-bottom: 67px;
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #242424;
  text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 25px;
}
.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  color: #242424;
  font-size: 14px;
  line-height: 24px;
  position: relative;
}
.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 44px;
  top: 10px;
  left: -60px;
  color: #ff6d00;
}
.timeline-article .content-left-container {
  float:...