JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div>
  <img class="banner-image" src="/assets/[email protected]" alt="Productionbanner@3x">
  <div class="text-over-image">
    <h4 class="title-font">Speed Management</h4>
    <h5>- Exploring 3 interactions that creates great impact</h5> 
    <a href="/user_profiles/2/user_notes/new?book_summary_id=3">
      <img height="15" width="15" class="mt-45 pull-right mr-25" src="/assets/[email protected]" alt="Add@2x">
    </a>    
  </div>
</div>

CSS

.banner-image{
  height: 140px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.text-over-image{
  z-index: 100;
  position: absolute;
  color: white;
  margin-top: -180px;
}
.pull-right {
  float: right!important;
}

.mt-45 {
  margin-top: -45px;
}
.mr-25 {
  margin-right: -25px;
}