JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class="image" :style="cssVars">
  
  </div>
</div>

CSS

.image {
  height: 100px;
  width: 100px;
  background-image: linear-gradient(rgba(29, 29, 29, 0) 15vh, rgb(29, 29, 29)),
    var(--bg);
}

JavaScript

new Vue({
  el: '#app',
  data () {
    return {
      img: 'https://vuejs.org/images/logo.png'
    }
  },
  computed: {
    cssVars() {
      return {
        "--bg": 'url("' + this.img + '")'
      }
    }
  }
})