JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="top">Hello there</div>
<div class="middle">discription</div>
<div class="bottom">more discription</div>

CSS

body{
    height: 100%;
    width: 100%;
    position: absolute;
    margin:0px;
    }

.top{
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: linear-gradient(rgb(52, 59, 100), rgba(0, 93, 255, 0.45) ), url(https://dronevideodirectory.com/wp-content/uploads/1024x1024.jpeg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    }