JSFiddle - React, Tailwind, and code Playground

by anonchik

HTML

<main class="container">
     <section class="features">
      <div class="description-header">
        <h2>Седона - небольшой городок в Аризоне, заслуживающий большего!</h2>
        <p>Рассмотрим 5 причин, по которым Седона круче, чем гранд каньон!</p>
      </div>
      <div class="features-column">
        <div class="features-text">
        <div class="text-wrapper">
        <h2>Настоящий городок</h2>
        <p class="features-number">№1</p>
      <p>СЕДОНА — НЕ АТтРАКЦИОН ДЛЯ ТУРИСТОВ, ТАМ ТЕЧЕТ СВОЯ ЖИЗНЬ</p>
    </div>
  </div>
    </div>
    <div class="image-preview image-preview-1">
      </div>
      </section>
      </main>

CSS

h2 {
	margin:0;
  padding: 0;
  padding-top: 43px;
	text-transform:uppercase;
	text-align:center;
	font-family:PT Sans,Arial,sans-serif;
	font-size:21px;
	font-weight:700;
	line-height:26px;
}

p {
	margin:0;
  padding-top: 18px;
  text-transform:uppercase;
	text-align:center;
	font-family:PT Sans,Arial,sans-serif;
	font-size:14px;
	font-weight:400;
	line-height:21px;
}

.text-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.container {
  width: 768px;
  outline: 2px solid red;
  margin: 0 auto;
}

.features-text {
  min-height: 256px;
  width: 33%;
  float: left;
  background-color: #81b3d2;
  color: #ffffff;
}

.image-preview {
  width: 67%;
  float: left;
  height: 256px;
  line-height: 0;
}

.image-preview-1 {
  background: #ffffff url("http://i.imgur.com/C36kmZ7.png") center no-repeat;
}