JSFiddle - React, Tailwind, and code Playground

by Charles Cavalcante

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<section id="welcome-section">
  <div class="container">
    <div class="row align-items-center">
      <div class="column col-lg-6 col-md-12">
        <div class="welcome-content">
          <p class="welcome-txt">Welcome</p>
          <h1 class="my-4">A New Vision of Luxury</h1>
          <p class="subhead my-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          </p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
          <span>- John Doe, Manager</span>
        </div>

      </div>
      <div class="column col-lg-6 col-md-12">
        <img src="https://images.pexels.com/photos/221457/pexels-photo-221457.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
      </div>
    </div>
  </div>
</section>

CSS

#welcome-section {
  padding: 80px 60px;
}

#welcome-section .column {
  height: 100%;
}

#welcome-section .column .welcome-content,
#welcome-section .column img {
  width: 100%;
  height: auto;
}

#welcome-section .column img {
  -webkit-box-shadow: 4px 4px 10px #000;
  box-shadow: 4px 4px 10px #000;
}

#welcome-section .column .welcome-content .welcome-txt {
  color: #102542;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

#welcome-section .column .welcome-content .subhead {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1px;
}

#welcome-section .column .welcome-content p {
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}