JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<div class="bit">
  <div class="flex-row">
    <div class="bit-img">
      <img src="https://res.cloudinary.com/byte-news/image/upload/dev-assets/images/vrhofdfks0ent4ist4k7" height="400" />
      <div class="bit-text">
        <h4>Tesla's German Gigafactory and Microsoft's new election technology</h4>
        <p>Tesla continues construction of its German Gigafactory despite local protests and Microsoft unveils new election technology</p>
        Topics
        Business
      </div>
    </div>
  </div>
  <div class="">
    <a href="https://play.google.com/store/apps/details?id="><img src="" height="80" alt="Android"/></a>
    <a href="https://apps.apple.com/us/app/"><img src="" height="80" alt="iOS"/></a>
  </div>
</div>

CSS

.flex-row { display: flex; flex-direction: row; }
.flex-align-center { align-items: center; }
.bit {
  background: white;
  box-shadow: 0px 1px 4px rgba(186, 186, 186, 0.25);
  padding: 30px 40px;
  border-radius: 5px;
}

.bit-img {
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background-color: #FAFAFAE6;
}

.bit-text {
  padding: 20px 30px;
  position: relative;
  top: 8px;
  left: 16px;
  background-color: #00000044;
}