JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'>
  <div class='text'>
    <div>
      Free online therapy
    </div>
  </div>
</div>

SCSS

.box {
  position: relative;
  width: 800px;
  height: 500px;
  background: tomato;
  margin: 50px;
  background-image: url(https://s3.us-east-2.amazonaws.com/temporary-th-photos/shutterstock_447793483.jpg);
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@import url(https://fonts.googleapis.com/css?family=Courgette);

.text {
  margin-right: 40px;
  color: #00ffbc;
  color: #64ffd6;
  // color: #ff0095;
  // color: #d400b6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 -1px 3px rgba(0, 0, 0, 0.5);
  // text-shadow: 0 2px 3px rgba(255, 255, 255, 1), 0 -1px 2px rgba(255, 255, 255, 1), 0 3px 2px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  font-family: 'Courgette', cursive;
  font-size: 40px;
  // width: 300px;
  text-align: center;
  // border-bottom: 2px solid #00ffbc;
  // padding: 0 40px 10px 0;
}