JSFiddle - React, Tailwind, and code Playground

by gokulmaha

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@600&display=swap" rel="stylesheet">
<div id="c">

</div>

CSS

.product span img{
  position:absolute;
 width:100%;
     height: auto;
    max-width: 110px;
    display: block;
} 
.product{
  width:300px; 
  height:300px;
  border:1px solid #ccc;
float:left;
margin-right:10px;
font-family: 'Noto Sans Tamil', sans-serif;
}
.product .name{
  text-align:center;
  padding:0px 20px
}
.product img{
    width:250px; 
  height:250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

var Product = [
  {
    "Name": "சுரை-பச்சை நீட்டு / Long Green Zucchini Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 75,
    "Regular price": 95,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2018/08/1.jpeg, http://thamizhangaadi.in/wp-content/uploads/2021/07/Long-Green-Zucchini-seeds.jpg"
  },
  {
    "Name": "சுரை-வெள்ளை குண்டு/White Stew Zucchini Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 80,
    "Regular price": 100,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2021/07/white-stew-Zucchini.jpg, http://thamizhangaadi.in/wp-content/uploads/2021/07/white-stew-zucchini-seeds.jpg"
  },
  {
    "Name": "சுரை-வெள்ளை நீட்டு / Long White Zucchini Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 75,
    "Regular price": 95,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2021/07/long-white-zucchini.jpg, http://thamizhangaadi.in/wp-content/uploads/2021/07/long-white-zucchini-seeds.jpg"
  },
  {
    "Name": "சுரை - குடுவை / Bottle Gourd Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 70,
    "Regular price": 90,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2021/07/Untitled-design-2022-06-23T124837.139.jpg, http://thamizhangaadi.in/wp-content/uploads/2021/07/bottle-bourd-seeds.jpg"
  },
  {
    "Name": "சுரை - பம்பரம் / Zucchini Type Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 80,
    "Regular price": 100,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2021/07/சுரை-பம்பரம்.jpg, http://thamizhangaadi.in/wp-content/uploads/2021/07/சுரை-பம்பரம்-1.jpg"
  },
  {
    "Name": "வாடாமல்லி /  Globe Amaranth Seeds",
    "Short description": "",
    "Weight (g)": 10,
    "Sale price": 80,
    "Regular price": 100,
    "Images": "http://thamizhangaadi.in/wp-content/uploads/2021/07/E6-14.jpg"
  },
  {
    "Name": "கோழிக்கொண்டை / Cockscomb Seeds",
    "Short...