JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.13.last.min.js"></script>
<div class="reviews__row">
  <div class="reviews__col" al-repeat="t in text">
    <div class="reviews__name">
      <img src="img/author.png" alt="">Инна</div>
    <div class="reviews__text">{{t.slice(0, opened?1000:80)}}</div>
    <div class="reviews__more" :hidden="t.length<80 || opened" @click="this.opened=true">More</div>
    <div class="reviews__more" :hidden="!opened" @click="this.opened=false">Less</div>
    <div class="reviews__date">
      10.05.2016
    </div>
  </div>
  </div>

SCSS

//Основные цвета
@c-green: #88cb73;
@c-blue: #43938a;
@c-blue-t: #3e90bf;
@c-yellow: #edc949;
@c-white: #ffffff;
@t-gray: #494949;
@t-gray-l: #989898;
@t-blue: #3674b3;
@t-white: #ffffff;
@c-gray: #787878;

//Брэкпоинты
@mobile:      ~"screen and (max-width: 767px)";
@tablet:     ~"screen and (max-width: 1024px)";

.reviews {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #e5e5e5;
	background: #fff;
	padding-top: 36px;
	padding-bottom: 40px;
	@media @mobile {
		padding-top: 50px;
		padding-bottom: 60px;
	}
  &__more {
    color: blue;
    cursor: pointer;
  }
	&__title {
		font-size: 18px;
		line-height: 24px;
		text-transform: uppercase;
		font-weight: 400;
		color: #2e2e2e;
		padding-left: 40px;
		margin-bottom: 60px;
		@media @mobile {
			margin-bottom: 0;
		}
	}
	&__row {
		display: flex;
		@media @mobile {
			flex-direction: column;
		}
	}
	&__col {
		width: 33%;
		padding-left: 38px;
		padding-right: 20px;
		&:last-child {
			@media @tablet {
				display: none;
			}
			@media @mobile {
				display: block;
			}
		}
		@media @tablet {
			width: 50%;
		}
		@media @mobile {
			width: 100%;
		}
	}
	&__name {
		font-size: 24px;
		line-height: 24px;
		color: #414141;
		margin-bottom: 40px;
		padding-left: 36px;
		position: relative;
		@media @mobile {
			margin-top: 40px;
		}
		& img {
			position: absolute;
			border-radius: 50%;
			height: 28px;
			width: 28px;
			left: 0;
			top: -3px;
		}
	}
	&__text {
		font-size: 16px;
		line-height: 24px;
		color: #414141;
		font-weight: 300;
	}
	&__date {
		font-size: 14px;
		line-height: 24px;
		color: #a0a0a0;
		margin-top: 20px;
	}
}

JavaScript

alight.bootstrap('.reviews__row', {
	text: [
  'Необходимо выполнить контрольную рабdfdfdfоту по конституционному праву',
  'Необходимо выполнить контрольную работу по конституционному праву ыфва фыва фывапфыва фыва фыва фываыфвафыв фыафыва',
  'Необходимо выполнить контрольную работу по конституционному праву. Необходимо выполнить контрольную работу по конституционному праву. Необходимо выполнить контрольную работу по конституционному праву.'
  ]
})