JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div id="product-landing">
  <div class="landing-row">
    <div class="product-landing product">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product1</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="https://dummyimage.com/200x200/000/fff"></a>
      </p>
    </div>
    <div class="product-landing-2 product">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product2</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="https://dummyimage.com/200x200/000/fff"></a>
      </p>
    </div>
    <div class="product-landing-3 product">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product3</a></div>
        <p>
        </p>
        <p><b><i>Product description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="https://dummyimage.com/200x200/000/fff"></a>
      </p>
    </div>
    <div class="product-landing-4 product">
      <div id="product-text">
        <div id="offer-title"><a href="/address" target="_blank">Product4</a></div>
        <p>
        </p>
        <p><b><i>Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct description</i></b></p>
      </div>
      <p class="land-image">
        <a href="/address" target="_blank"><img src="https://dummyimage.com/200x200/000/fff"></a>
      </p>
    </div>
  </div>

CSS

#product-landing .landing-row {
  position: relative;
  height: inherit;
}

.product-landing,
.product-landing-2,
.product-landing-3 {
  margin-right: 2.0533%;
}

.product-landing,
.product-landing-2,
.product-landing-3,
.product-landing-4 {
  margin-left: 0px;
  display: inline-block;
  position: relative;
  height: 100%;
  vertical-align: top;
  width: 22.978%;
}

.product-landing-4 {
  margin-right: 0px;
}

#product-landing p {
  margin-top: 0px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
}

.product-landing .land-image {
  vertical-align: bottom;
}

.product-landing img,
.product-landing-2 img,
.product-landing-3 img,
.product-landing-4 img {
  margin-top: 10px;
  display: block;
  max-width: 350px;
  margin: 0 auto;
  bottom: 0px;
  width: 100%;
}

.landing-row {
  display: flex;
  align-items: flex-stretch;
  height: 500px;
}

.product {
}