JSFiddle - React, Tailwind, and code Playground

by Dmitriy Amangaliev

HTML

<div class="profile-block-top">
		<a href="#" class="profile_link">Личные данные</a>
		<a href="#" class="profile_link">Контактные лица</a>
		<a href="#" class="profile_link">Адресная книга</a>
		<a href="#" class="profile_link">Плательщики</a>
</div>
<div id="user_div_reg" class="profile-block">
		<div class="header_profile" >
			<a class="profile_link">Личные данные</a>
		</div>
		<div class="profile_section">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
		</div>
</div>
<div id="user_div_reg" class="profile-block">
		<div class="header_profile" >
			<a class="profile_link">Контактные лица</a>
		</div>
		<div class="profile_section">
			Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо
		</div>
</div>
<div id="user_div_reg" class="profile-block">
		<div class="header_profile" >
      <a class="profile_link">Адресная книга</a>
		</div>
		<div class="profile_section">	
      Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог
  </div>
  <div class="add_new">
				<a href="#">Новый адрес</a>
  </div>
  <div class="new">
     Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг,...

CSS

.profile-block-top
{
	display: inline-block;
	background-color: #e6e6e6;
	padding: 40px;
}
.header_profile{
	margin: 10px auto 0px auto;
	padding: 17px 0;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	color: #081f34;
	text-align: center;
	text-transform: uppercase;
	background-color: #35a7e5;
}
.profile-block{
  display: none;
}
.profile_link{
	display: block;
	width: 100%;
	color: #081f34;
}
.profile-block-top>a{
	margin-top: 20px;
	display: inline-block;
	width: 460px;
	padding: 17px 0;
	background-color: #062538;
	color: #35a7e5;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
	vertical-align:middle;
	text-align: center;
}
.add_new{
	width: 480px;
	background-color: #35a7e5;
	color: #081f34;
	font-family: 'Esqadero-FF-CY-4F-Regular';
	font-size: 16px;
	text-transform: uppercase;
	position:absolute; 
	bottom:40px;
}
.add_new a{
	display: block;
	padding: 18px 20px;
	color: #081f34;
}