JSFiddle - React, Tailwind, and code Playground

by SlurmMcKenzie

HTML

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<body class="randomImage">

<div class="logo">
  <h1 class="randomImage">
    BLOCK
  </h1>
</div>

  <div class="bubble">

    <h1>
      ÜBER<br>UNS
    </h1>

    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </p>

  </div>

</body>

SCSS

body {
  font-family: verdana;
  background-color: #fff;
}

.logo{
  h1{
  width:  fit-content;
  background: url("/path/to/image.jpg") center;
  background-clip: text;
  color: transparent;
 
  }
}

.randomImage{
    /* BOX MODEL */
  width:  fit-content;

  
  /* ENHANCEMENT */
  background-position: center center;

}
.bubble {
  transform: translateY(250px);
  position: relative;
  width: 500px;
  margin: auto;
  padding: 10px 20px;
  color: #20262e;
  background-color: #fff;
  border-radius: 5px;
  
h1{
  font-family: 'Permanent Marker', cursive;
  position: absolute;
  width: fit-content;
  transform: skewY(-15deg) translateY(-160px) translatex(-80px);
  background-color: #fff;
  padding: 20px 25px;
  color: #000;
}
}

JavaScript

var images = ['muppets.gif', 'moveitmoveit.gif', 'oohoohILOVETHISSONG.gif', 'haters.gif', 'fuckasterisk.gif'];

$('.randomImage').css({'background-image': 'url(http://bukk.it/' + images[Math.floor(Math.random() * images.length)] + ')'});