JSFiddle - React, Tailwind, and code Playground

by adonis11

HTML

<section class="about">
	<div class="wrap_about">
	<h2>Обо мне</h2>
	<p>Я умный, милый, обаятельный и в меру упитанный мопс.</p>
		<article class="grid">
			<img src="https://myrusakov.ru/images/articles/html_coding_img1.jpg" width="220px" height="228px" alt="картинка мопса">
				 <h3>Мой загадочный друг</h3>
					<p>Мы с Каспером лучшие друзья. Он конечно внешне не такой милый как я, но мне нравиться с ним играть. Он загадочный и похож на инопланетянина.</p>
		</article>
		<article class="grid">
			<img  src="https://myrusakov.ru/images/articles/html_coding_img2.jpg" width="220px" height="228px" alt="картинка мопса">
				<h3>Мое главное занятие</h3>
					<p>Я могу спать везде и всегда - дома на подоконнике, на всех кроватях и диванах, а особенно в машине у мамы на ручках. Меня дома называют "спящая красавица"</p>
		</article>
		<article class="grid">
			<img src="https://myrusakov.ru/images/articles/html_coding_img3.jpg" width="220px" height="228px" alt="картинка мопса">
				<h3>Мои хобби</h3>
					<p>Я собака-компаньон. Что это значит на деле? На самом деле долгие прогулки с хозяином - это не про меня. А вот красиво лежать на диване - здесь нет мне равных.</p>
		</article>
			  <div class="clear"></div>
	</div>
</section>

CSS

.about{
    color:#fff;
	background-color: #a87a7a; /* коричневый фон секции "Обо мне"  */
	text-align:center; /* позиционирование текста */
	padding: 5em 0em; /* отступы для текста */
	} 
.wrap_about{
	width: 90%; /* занимаемая ширина белых блоков по отношению к браузеру */
	margin: 0 auto; /* расположение секций по центру */
	
	}
.about h2{ 
	font-size:2em;
	padding-bottom: 0.5em;
   }
.about p{
	font-size:1em;
	padding-bottom: 4em;
  }
.grid{   
    width: 30%;
	float: left;
	background: #fff;
	margin: 0 1.5% 0 1.5%;
	border: 1px solid black;
	min-height: 508px;
   }
.grid  h3{
	color: #292828;
	font-size: 1.4em;
	margin-top: 15px;
   }
.grid  p {
	color: #444444;
	font-size: 1.02em;
	text-align: left;
	padding: 1em 1em 2em 1em;
	line-height: 1.9em;
}
.clear{clear:both;} /* clear float */