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-container>
 <b-row :fluid="fluid" align-h="center">
    <b-col :cols="col">Logo
    </b-col>
        <b-col :cols="col">
        
        <div>
  <b-carousel
    id="carousel-fade"
    style="text-shadow: 0px 0px 2px #000"
    fade
    indicators
    img-width="1024"
    img-height="480"
  >
    <b-carousel-slide
      caption="First slide"
      img-src="http://picsum.photos/1024/480/?image=10"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Second Slide"
      img-src="http://picsum.photos/1024/480/?image=12"
    ></b-carousel-slide>
    <b-carousel-slide
      caption="Third Slide"
      img-src="http://picsum.photos/1024/480/?image=22"
    ></b-carousel-slide>
  </b-carousel>
</div>
        
        
        
        </b-col>
        </b-row>
        </b-container>

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')
      }
    }
  })
}