JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<img src="http://127.0.0.1:8080/vermilion/img/Vermilion_Logo_New_2.png" class="logo">
<div class="moto">Empowered Reporting</div>

<hr>

<div class="title">Empowered Reporting</div>
<div class="sub-title">Empowered Reporting</div>

<div class="tinted-image"></div>

CSS

html,body{
  padding:0;
  margin:0;
}
.tinted-image {
  
  width: 100%;
  height: 100vh;
  
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(24, 42, 84, 0.80), 
      rgba(24, 42, 84, 0.80)
    ),
    /* bottom, image */
    url(https://unsplash.it/1366/768?random);
    background-size:cover;
    background-attachment: fixed;
}
.logo{
  position:absolute;
  height:5%;
  url(http://127.0.0.1:8080/vermilion/img/Vermilion_Logo_New_2.png);
  margin:25px
}
hr{
  position:absolute;
  width:calc(100% - 50px);
  margin-left: 25px;
  margin-top: 70px;
}
.moto{
  position:absolute;
  right: 25px;
  color:#fff;
  margin-top:35px;
  font-family: KlinicSlabLight;
  font-size: 12px;
}
.title{
    position: absolute;
    margin-top: 110px;
    font-family: KlinicSlabLight;
    font-size: 70px;
    color: #fff;
    margin-left: 25px;
}
.sub-title{
    position: absolute;
    margin-top: 200px;
    font-family: AkkLg_Pro_1;
    font-size: 15px;
    color: #fff;
    margin-left: 25px;
}