GH
Gabriel Henrique

Cart Modal - Copy this React, Tailwind Component to your project

"Make this code visually more appealing to display the cart in this modal, more readable with the customer’s visual experience in mind, without using JavaScript. Without changing the content, I just want the layout to be more professional with the same data."<div class="bg black/60 w full h full fixed top 0 left 0 z [99] items center justify center hidden" id="cart modal"> <div class="bg white p 5 rounded md min w [90%] md:min w [600px]"> <h2 class="text center font bold text 2xl mb 2">Meu Carrinho</h2> <div id="cart items" class="flex flex col mb 2"></div> <! Alterado para flex col > <div class="mt 4"> <label> <input type="radio" name="delivery option" id="pickup option"> Retirar na loja (Retire seu pedido na loja 😊!) </label> </div> <div class="mt 2"> <label> <input type="radio" name="delivery option" id="delivery option" value="delivery"> Entregar pedido (Entrega em endereço fornecido🏍️📦) </label> </div> <div id="delivery address container" class="hidden"> <p class="font bold mt 4">Endereço de entrega:</p> <input type="text" placeholder="Digite seu endereço completo..." id="address" class="w full border 2 p 1 rounded my 1 border black"> <p class="text red 500 hidden" id="address warn">Digite seu endereço completo!</p> </div> <p class="text red 500 hidden" id="delivery option warn">Por favor, selecione uma opção de entrega!</p> <p id="delivery fee" class="font medium text yellow 500 mt 4 py 4">Taxa de entrega: R$ 0.00</p> <p class="font bold py 2">TOTAL: <span id="cart total">0.00</span></p> <div class="flex items center justify between mt 5 w full"> <button id="close modal btn">Fechar</button> <button id="checkout btn" class="bg green 500 text white px 4 py 1 rounded">Finalizar pedido</button> </div> </div> </div>

Prompt
Component Preview

About

CartModal - A sleek, user-friendly cart interface with delivery options, address input, and total display, built with React and Tailwind. Start coding now!

Share

Last updated 1 month ago