JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<div class="container">
  <h1>INFO</h1>
  <div class="content">
  <div class="info">
      <h2>Age</h2>
      <p>20</p>
    </div>
    <div class="info">
      <h2>Adress</h2>
      <p>Wolna 23, Warszawa</p>
    </div>
    <div class="info">
      <h2>Email</h2>
      <p>lorem@gmail.com</p>
    </div>
    <div class="info">
      <h2>Phone</h2>
      <p>669 133 777</p>
    </div>
  </div>
</div>

CSS

.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 35.5%;
  height: 550px;
  padding: 20px;
  margin: 20px;
  background: #000;
}
h1 {
  color: #fff;
}
.content {
  margin: auto;
}
.info {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: 0 0 15px 0;
  color: #fff;
}
.info h2,
.info p {
  margin: 0;
}