JSFiddle - React, Tailwind, and code Playground

by Stafox

HTML

<div class="screen">
  <div class="image-block">
    <div class="image"></div>
    <div class="gradient"></div>
  </div>
  
  <div class="content">
        
      <div class="title">Mega title</div>
      <div class="sub-title">Sub-title</div>
      
      <div class="list">
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
      </div>
  </div>
  
</div>

CSS

.screen {
  width: 320px;
  height: 750px;
  background-color: rgba(0, 31, 63, 1);
  position: relative;
  font-family: 'Open Sans', 'Arial', 'Helvetica Neue';
}

.image-block {
  top: 0;
  left: 0;
  z-index: 0;
  position: absolute;
  height: 180px;
  width: 100%;
  background-color: #336699;
}

.image {
  background-color: #336699;
  height: 180px;
  background-image: url(https://www.adorama.com/alc/wp-content/uploads/2018/08/san-juans-feature-825x465.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.gradient {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 31, 63, 1) 0%, rgba(0, 31, 63, 0.2) 100%);
}

.content {
  padding: 100px 30px 0;
  position: relative;
  z-index: 3;
  color: #fff;
}

.title {
  font-weight: bold;
  font-size: 18px;
}

.sub-title {
  font-size: 14px;
}

.list {
  margin-top: 30px;
}
.list-item {
  width: 100%;
  background-color: #eee;
  opacity: 0.5;
  height: 80px;
  margin-top: 20px;
}