JSFiddle - React, Tailwind, and code Playground

by saitam

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">



<!-- MAIN SECTION WITH BACKGROUND IMAGE-->
<section class="main-image">

  <!-- MAIN CONTENT-->
  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text           some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text           some textSome text some textSome text some textSome text some textSome text some textSome text  text some text
          Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>
  </div>

</section>

<!-- FOOTER SECTION-->
<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>

CSS

html,
body {
  min-height: 100%;
  height: 100%;
}


.mt-100 {
  margin-top: 100px;
}


.main-image {
  width: 100%;
  height: 100vh;
  /* responsive */
  background-image: url("http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
  background-size: cover;
  background-position: 0% 100%;
}


.page-footer {
  background-color: #343a40;
  color: white;
  padding: 30px 30px 30px 30px;
  position: relative;
  bottom: 0;
  width: 100%;
  /* min-height:10vh; */
}