JSFiddle - React, Tailwind, and code Playground

banner

by Dug Sohn

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>
 <b-row :fluid="fluid" align-h="center">
    <b-col :cols="cols">
      <div class="jumbotron homepage jumbotron-fluid bg-primary">
        <div class="jumbtron-bg-overlay"></div>
        <div class="container" style="position:relative">
        <div style="position: absolute; bottom: 5px; right: 5px" class="text-center text-white"><div><small>CO-HOST</small></div><img src="https://tilt-vep-images.s3.amazonaws.com/clients/atlas/lfo2021/latam/LOGOWHITE.png" class="banner-logo-right"></div>
      </div>
      </div>
    </b-col>
  </b-row>

CSS

body { padding: 3rem 0; }

.jumbotron.homepage {
  
  background-image: url(https://tilt-vep-images.s3.amazonaws.com/clients/atlas/lfo2021/latam/600x250+RLFs_Banner_LA_V2.jpg);
  background-size:cover;
  height:300px;
  padding:0;
}

.jumbtron-bg-overlay {
  
   background-image: url(https://tilt-vep-images.s3.amazonaws.com/clients/atlas/lfo2021/latam/600x250+RLFs_Banner_LA_V2_overlay.png);
  background-size: auto 300px;
  background-repeat: no-repeat;
  background-position: center;
  height:300px
}
.banner-logo-right {
  width:80px
}


@media (max-width: 576px) {
 .text-white {
      filter: invert(1);
   }
  }
@media (max-width: 768px) {
.text-white {
      filter: invert(1);
   }
  }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        show: true
      }
    },
    watch: {
      show(newVal) {
        console.log('Alert is now ' + (newVal ? 'visible' : 'hidden'))
      }
    },
    methods: {
      toggle() {
        console.log('Toggle button clicked')
        this.show = !this.show
      },
      dismissed() {
        console.log('Alert dismissed')
      }
    }
  })
}