JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<div class="scroller">
<div class="scroller__header">

</div>

<div class="scroller__body">
 <p>
   Наталья была супругой принца Николая Вильгельма Нассауского. Александр был известным русским генералом и членом советов по учебной части Екатерининского и Александровского женских институтов, заведующим учебной частью Московского Императорского коммерческого училища, а также опекуном Московского присутствия Опекунского совета Учреждений императрицы Марии. Младший сын Григорий был членом Виленской судебной палаты и одним из главных благотворителей местной гимназии. Вместе со своей семьей он жил под Вильнюсом.

У него действительно есть африканские корни?
Да, есть. Мать Пушкина — Надежда Осиповна была дочерью Осипа Абрамовича Ганнибала и Марии Алексеевны Пушкиной и внучкой Абрама Петровича Ганнибала — «арапа Петра Великого».

Прапрадед Пушкина по материнской линии был богатым и владетельным феодалом в Эфиопии.
Как писал Пушкин, его сына тайно увезли в Константинополь в качестве раба. «Дед ее был негр, сын влиятельного князька. Русский посланник в Константинополе как-то достал его из сераля, где содержался он анаматом, и отослал его Петру Первому вместе с двумя другими арапчатами. Государь крестил маленького Ибрагима в Вильне в 1707 году, … и дал ему фамилию Ганнибал».

Читайте также

Не се ль Минервы росской храм? Чему и как учили в Царскосельском лицее
Где находятся Михайловское и Болдино?
Болдино — село в Нижегородской области. На протяжении четырех веков оно принадлежало роду Пушкиных. Пушкин часто проводил там время, останавливаясь в усадьбе отца. В Болдино Пушкиным были написаны «Сказка о золотом петушке», «Медный всадник», «Анджело, «Пиковая дама», «Сказка о мёртвой царевне и о семи богатырях», «Сказка о рыбаке и рыбке» и другие.

 
Михайловское было имением матери Пушкина в Псковской губернии. Обустраивал его еще в XVIII веке Осип Ганнибал. Там Пушкиным было создано около ста произведений, в частности, трагедия «Борис Годунов», центральные главы романа...

CSS

div {
  box-sizing: border-box;
}
.scroller {
  border: 1px dashed #aaa;
  height: 250px;
  
  position: relative;
}

.scroller__header {
  background: rgba(200,0,0,.1);
  height: 50px;
  top: 0;
  position: absolute;
  width: calc(100% - 20px);
  z-index: 1;
}
.scroller__body {
  height: 100%;
  overflow-y: auto;
  padding: 50px 0;
}

.scroller__footer{
  background: rgba(0,0,200,.1);
  bottom: 0;
  height: 50px;
  position: absolute;
  width: calc(100% - 20px);
}