JSFiddle - React, Tailwind, and code Playground

HTML

<div id="transparent-block">
    <section class="transparent-block"></section>
    <section class="transparent-block-content">
        <h1>Вы ищите замену для товара:</h1>
        <img src="http://s019.radikal.ru/i606/1409/be/5284cb03911b.jpg" alt="" width="135" height="86">
            <div>
                <span>32144_С5-658</span>
                <span>1.50 $</span>
                <span>Отменить и вернуться в корзину</span>
            </div>
        </section>
    </div>
        <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perferendis placeat repellendus minima reiciendis iusto quia assumenda soluta inventore totam quam repudiandae eaque doloribus eius corporis earum, sequi harum nobis.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perferendis placeat repellendus minima reiciendis iusto quia assumenda soluta inventore totam quam repudiandae eaque doloribus eius corporis earum, sequi harum nobis.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perferendis placeat repellendus minima reiciendis iusto quia assumenda soluta inventore totam quam repudiandae eaque doloribus eius corporis earum, sequi harum nobis.</p>

CSS

#transparent-block {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 8;
}
.transparent-block {
  position: relative;
  width: 351px;
  height: 149px;
  z-index: 9;
  background: linear-gradient(to bottom,  #f06c00 0%,#cb0108 100%);  
  opacity: 0.75;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
}
.transparent-block-content {
  position: relative;
  z-index: 10;
  width: 335px;
  height: 119px;
  padding: 10px 12px 12px;
}  
.transparent-block-content h1 {
  color: #000;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 10px;
}
.transparent-block-content img {
  float: left;
}
.transparent-block-content div {
  float: left;
  width: 150px;
  color: #000;
    
  margin-left: 20px;
 }