JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="zerra-porto">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-6 align-self-center">
        <h1 class="mb-4">
          Hi, My Name is <br />
          Sumnit Parfit
        </h1>
        <p>A Front End Developer</p>
        <a href="#" role="button" class="btn btn-primary">Get to know</a>
      </div>
    </div>
  </div>
  <div class="landing-bg">
    <img src="https://via.placeholder.com/800x600" alt="lanfing banner bg" class="landing-pic" />
  </div>
</section>

CSS

.zerra-porto {
  position: relative;
  height: 100vh;
}

.landing-bg img {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  obje
}