JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container main-div">
  <div class="row">

    <div class="col-auto col-md-3 col-xs-6 col-sm-4">
      <div class="card-d">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="tea">
        <div class="desc">
          <span><h4>Tea | 1 Kg</h4></span>
          <p>The price is : 56.0</p>
          <button>View</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.main-div {
      width: 90%;
      background-color: white;
      padding: 5% 1%;
      text-align: center;
      margin-left: auto;
    }

    .col-auto {
      position: relative;
      border: 1px solid blue;
      margin: 10px auto;
      padding-left: 6%;
      padding-bottom: 4%;
    }

    .col-auto>.desc {
      width: 100%;
      justify-content: left;
      font-family: Arial;
      text-align: left;
    }

    .col-auto img {
      width: 140px;
      height: 100px;
      padding: 5px;
      display: inline-block;
      margin: 0 auto;
      border: 1px solid #088837;
    }

    button {
      background-color: green;
      color: white;
      font-size: 1em;
      border: 0.1px;
      border-radius: 3px;
      padding: 5px 10px;
    }