JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="jumbotron jumbotron-fluid my-jumbotron">
  <div class="container">
    <h1 class="display-4">This is a slide item.</h1>
    <p class="lead">The quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog.</p>
    
    <button type="button" class="btn btn-outline-light btn-lg  btn-block">Download our app</button>
  </div>
</div>

CSS

.my-jumbotron {
  background-color: #65b234;
  color: #fff;
  background-image: linear-gradient(45deg, rgba(255, 17, 40, .75), rgba(0, 0, 0, 0.25), rgba(17, 253, 255, 0.75)), url("https://images.unsplash.com/photo-1505759115705-e48bf15b15b6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=36c8d4b6e72bc8efb665956c314e5b89&auto=format&fit=crop&w=1352&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 600px;
  transition: 0.2s all ease-in-out;
}

.my-jumbotron::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-image: linear-gradient(45deg, rgba(255, 17, 40, .75), rgba(0, 0, 0, 0.25), rgba(17, 253, 255, 0.75)), url("https://images.unsplash.com/photo-1505759115705-e48bf15b15b6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=36c8d4b6e72bc8efb665956c314e5b89&auto=format&fit=crop&w=1352&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: 0.2s all ease-in-out;
  
}


.my-jumbotron:hover::before {
  transform: scale(1.4);
}


.my-jumbotron .container {
  position: relative;
}


.my-jumbotron h1 {
  color: yellow;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
}