Tile
Tileunknown
html
a year ago
1.7 kB
4
Indexable
<div class="order-tile"> <div class="order-info"> <span class="order-no">Order #123456</span> <span class="order-status delivered">Delivered</span> </div> <div class="details"> <span class="order-date">Order Date: June 10, 2024</span> <span class="total-amount">Total: ₹2500</span> </div> <div class="actions"> <button class="view-details-btn">View Details</button> <button class="return-btn">Return</button> </div> </div> .order-tile { padding: 16px; margin: 8px 0; border: 1px solid #E0E0E0; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .order-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .order-no { font-size: 16px; font-weight: 600; color: #333333; } .order-status { font-size: 14px; font-weight: 500; } .order-status.delivered { color: #4CAF50; } .details { display: flex; flex-direction: column; margin-bottom: 12px; } .order-date, .total-amount { font-size: 14px; font-weight: 400; color: #666666; margin: 4px 0; } .total-amount { font-size: 16px; font-weight: 600; color: #333333; } .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .view-details-btn, .return-btn { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 4px; text-decoration: none; cursor: pointer; } .view-details-btn { color: #FFFFFF; background-color: #2196F3; } .return-btn { color: #FFFFFF; background-color: #F44336; }
Editor is loading...
Leave a Comment