JSFiddle - React, Tailwind, and code Playground

by cbruen1

HTML

<div class="image-bg">
  <div class="alpha-bg">
    <p>Just some text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, repellendus at inventore, sapiente consequuntur aut sunt dolorem, doloribus ut quibusdam et temporibus iusto qui repudiandae, consectetur dolores omnis soluta autem.</p>
  </div>
</div>

CSS

.image-bg {
  width: 400px;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  
  /* sets the background image */
  /* background: url(https://unsplash.it/400/300) no-repeat; */
  
  /* sets gradient and image */
  background: linear-gradient(rgba(255, 255, 255, 0.8),
                 rgba(199,21,133, 0.5)),
                 url(https://unsplash.it/400/300) no-repeat;
}

.alpha-bg {
  padding: 20px;
  height: 100%;
  /* color: #eeeeee; */
  
  /* sets the color with alpha transparency */
  background: rgba(70,130,180, 0.4);
}