Styled Card - Copy this React, Mui Component to your project
<div className="container mx auto p 4"> <div className="grid grid cols 3 gap 4"> <div className="col span 2"> <div className="bg white p 4 rounded lg shadow"> <div className="flex border b 2 border gray 200 mb 4"> <div className="text green 600 font bold mr 4">ĐẶC ĐIỂM</div> <div className="text gray 600 font bold">ĐÁNH GIÁ</div> </div> <div className="text gray 600">Đang cập nhật ... !</div> </div> <div className="bg white p 4 rounded lg shadow mt 4"> <div className="text lg font bold mb 4">ĐÁNH GIÁ VỀ SẢN PHẨM</div> <div className="flex items start mb 4"> <div className="w 12 h 12 rounded full bg gray 300 flex items center justify center"> <i className="fas fa user text 2xl text gray 500"></i> </div> <div className="ml 4 flex 1"> <textarea className="w full p 2 border rounded lg" rows="4" placeholder="Nội dung"></textarea> </div> </div> <div className="flex items center mb 4"> <div className="mr 4">Đánh giá:</div> <div className="text yellow 500"> <i className="fas fa star"></i> <i className="fas fa star"></i> <i className="fas fa star"></i> <i className="fas fa star"></i> <i className="fas fa star"></i> </div> </div> <div className="flex mb 4"> <input type="text" className="flex 1 p 2 border rounded lg mr 2" placeholder="Tên (Bắt buộc)" /> <input type="email" className="flex 1 p 2 border rounded lg" placeholder="Email (Bắt buộc)" /> </div> <button className="bg green 600 text white px 4 py 2 rounded lg">GỬI ĐI</button> </div> </div> <div> <div className="bg white p 4 rounded lg shadow"> <div className="text lg font bold mb 4">SẢN PHẨM TƯƠNG TỰ</div> {[ { id: 'PADDA0043', name: 'LÓT CHUỘT DA 90X40 TRẮNG', price: '120.000₫', image: 'https://placehold.co/100x100', status: 'Còn hàng' }, { id: 'PADDA0050', name: 'LÓT CHUỘT DA 90X40 XANH JEAN', price: '120.000₫', image: 'https://placehold.co/100x100', status: 'Còn hàng' }, { id: 'PADDA0047', name: 'LÓT CHUỘT DA 90X40 NÂU', price: '120.000₫', image: 'https://placehold.co/100x100', status: 'Còn hàng' }, { id: 'PADDA0046', name: 'LÓT CHUỘT DA 90X40 ĐỎ', price: '120.000₫', image: 'https://placehold.co/100x100', status: 'Còn hàng' }, { id: 'PADDA0051', name: 'LÓT CHUỘT DA 90X40 XANH MINT', price: '120.000₫', image: 'https://placehold.co/100x100', status: 'Còn hàng' }, ].map((product, index) => ( <div key={index} className="flex items center mb 4"> <img src={product.image} alt={`Image of ${product.name}`} className="w 16 h 16 rounded lg mr 4" /> <div className="flex 1"> <div className="text sm text gray 600">Mã: {product.id}</div> <div className="font bold">{product.name}</div> <div className="text green 600 font bold">{product.price}</div> </div> <div className="text sm text green 600">{product.status}</div> <div className="ml 4"> <i className="fas fa shopping cart text green 200 text 2xl"></i> </div> </div> ))} </div> </div> </div> </div>
