JSFiddle - React, Tailwind, and code Playground

by naykris

HTML

<div>
  <span class="about">
    <span class="logo">JediCSS</span>
    <span class="article-tittle">Не используйте #ID в CSS</span>
  </span>
 </div>

CSS

div{
  background-image: url(http://img2.tvtome.com/i/u/335d2c631e374937c996c329f13c4cf5.jpg);
  background-image: linear-gradient(-45deg, #954BA6, #72219B);
  background-size: cover;
  height: 280px;
  position: relative;
  font-family: sans-serif;
}
div::before{
  content: '';
  position: absolute;
  top: 8px;
  left:8px;
  right:8px;
  bottom:8px;
  background-color: rgba(255, 255, 255, 0.8);
}

.about{
  font-size: 80px;
  position: absolute;
  z-index: 1;
  background-image: url(http://img2.tvtome.com/i/u/335d2c631e374937c996c329f13c4cf5.jpg);
  background-image: linear-gradient(-45deg, #954BA6, #72219B);
  background-size: cover;
   -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
  color: transparent;
  top: 0;
  left:0;
  right:0;
  bottom:0;
}
.logo{
  display:block;
  margin-top: 32px;
}
.article-tittle{
  font-size: 40px;
  color: #72219B;
  top: 60%;
  left:10%;
  right:10%;
  position: absolute;
}