JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<h1>Escolhe o modelo de pulseira</h1>
<div id="lista_pulseiras">

	<div class="item"><img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlo_3uDhdKHZkrbU5kglXhAFoaI_DIdLS3OPfaoprdigHyIcGG">
  <div class="preco"><input type="text" placeholder="Valor">
  <input type="submit" value="Gravar"></div>
  </div>
  <div class="item"><img src="https://http2.mlstatic.com/D_NP_673164-MLB29306294708_022019-Q.webp"> 
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://http2.mlstatic.com/D_NP_362605-MLB25046294482_092016-Q.webp">
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://http2.mlstatic.com/fechaduras-eletronicas-D_NP_946720-MLB28956739791_122018-Q.webp">
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnhncCiJSWcA_Y5sWgFkFCv7IpBY5EXgJrXjEsiiucUaaeMlysFQ">
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKZsbeLxMfR2pa8Kq3OXnF5kKbrswPCfeK_E_X41xpeO3g33nB">
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMEFXYMUDmRdTp-Aq3mwAiD673u9k3xHqFZtzgYEGJ3c1jnclt0w">
   <div class="preco">R$3,00</div>
  </div>
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiFodzT1HWfHcHLai4Uhly0hq-8XTjqjI3TQgyaVFHKoBsugaT">
   <div class="preco">R$3,00</div>
  </div>
  
</div>

CSS

#lista_pulseiras{
	display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill,150px); // definir a espesurra
  grid-auto-rows: 50px;//defini a largura
 
}
.item{
border:1px solid #c6c6c6;
padding: 10px;
}
.item img {
    width: 100%;
    height: 150px;
}
.preco input{
    display: block;
    width: 120px;
    text-align: center;
    padding: 3px;
    border: 1px solid #cbcbcb;
    outline: none;
    color: #000;
    border-radius: 2px;
    font-size: 13px;
    box-shadow: inset 0 2px 2px 0 rgba(40,68,128,0.1);
}
.preco input[type="submit"]{
margin-top: 2px;
    text-align: center;
    background: #9c0;
    color: #fff;
    text-shadow: none;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: initial;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), inset 0 -3px 0 0 rgba(0,0,0,0.15);
    border-radius: 3px;
    display: block;
    height: auto;
    width: 100%;
    -webkit-appearance: none;
    cursor: pointer;
    border: 0;
}