JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="container mt-5">
    <div class="row no gutters header text-left mt-5">
        <div class="col-sm-12">
            <h1 id="testing-1" class="display-4 text-left">Digital Study Skills Tutor</h1>
            <p class="lead">Free self-help study skills resources for university students</p>
            <a class="btn btn-lg btn-univ btn-primary" href="signup.php">Sign Up</a>
        </div>  
    </div>
</div>

CSS

.site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

    .display-4 {
  font-size: 2.25em;
  font-weight: 500;
  color: white;
}
@media (max-width:576px) {
  font-size: 1em;
  
}