JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,intial-scale=1.0">
    <meta name="author" content="AYAN CHOWDHURY">

    <title>Box styling</title>


    <link rel="stylesheet" href="./css/style.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  </head>

  <body>

    <div class="container main-div">
      <div class="row">

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


        </div>

        <div class="col-auto col-md-3 col-xs-6 col-sm-4">
          <div class="card-d">
            <img src="pics/brfs.jpg" alt="fish">
            <h4>Brazillian Fish</h4>
            <p>The price is : 500.0</p>
            <button>View</button>
          </div>
        </div>

        <div class="col-auto col-md-3 col-xs-6 col-sm-4">
          <img src="pics/salmon.jpg" alt="salmon">
          <div class="card-d">

            <h4>Salmon</h4>
            <p>The price is : 5.0</p>
            <button>View</button>
          </div>
        </div>

        <div class=" col-auto col-md-3 col-xs-6 col-sm-4">
          <img src="pics/bamboo.jpg" alt="bamboo">
          <div class="card-d">

            <h4>Bamboo shoot</h4>
            <p>The price is : 100.0</p>
            <button>View</button>
          </div>
        </div>

        <div class="col-auto col-md-3 col-xs-6 col-sm-4">
          <img src="pics/eggp.jpg" alt="eggp">
          <div class="card-d">

            <h4>Egg Plant</h4>
            <p>The price is : 30.0</p>
            <button>View</button>
          </div>
        </div>

        <div class="col-auto col-md-3 col-xs-6 col-sm-4">
        ...

CSS

body {
  padding: 20px 10px;
  background-color: green;
  line-height: 0.4;
  padding-top: 2.5%;
}

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

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

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

.col-auto>.desc {
  width: 100%;
  position: relative;
  left: 0%;
  font-family: Arial;
  text-align: left;
}

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

.row > .col-auto {
  display: flex;
}