Responsive Product Grid - Copy this Html, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Top-Bar-with-Image-and-Buttons</title>-<style>-body-{-margin:-0;-display:-flex;-flex-direction:-column;-align-items:-center;-}-.top-bar-{-width:-1024px;-height:-50px;-background-color:-black;-color:-white;-display:-flex;-align-items:-center;-justify-content:-center;-font-size:-20px;-font-family:-'Noto-Kufi-Arabic',-sans-serif;-direction:-rtl;-}-.image-container-{-width:-1024px;-height:-2500px;-}-.image-container-img-{-width:-100%;-height:-100%;-object-fit:-cover;-}-.buttons-wrapper-{-width:-1024px;-background-color:-#ffe2ca;-/*-Background-color-for-buttons-section-*/-padding:-20px-0;-}-.buttons-container-{-width:-1024px;-display:-grid;-grid-template-columns:-repeat(6,-1fr);-/*-6-buttons-per-row-*/-gap:-10px;-/*-Space-between-buttons-*/-}-.button-{-width:-100%;-height:-100%;-aspect-ratio:-1-/-1;-/*-Keeps-buttons-square-*/-border:-none;-background-color:-transparent;-}-.button-img-{-width:-100%;-height:-100%;-object-fit:-cover;-}-</style>-<link-href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap"-rel="stylesheet">-</head>-<body>-<div-class="top-bar">-تخفيض<span-class="space"></span><span-class="bold">50%</span><span-class="space"></span>و-التوصيل-مجاني-و-سريع-</div>-<div-class="image-container">-<img-src="https://cdn.discordapp.com/attachments/1301035324935508030/1322123813047238687/Untitled_design_3.png?ex=676fbb40&is=676e69c0&hm=3ecc0d7b02fc28664c05be5492dd1ac409c2bf0d47ab98f04e5dd570acf6a997&"-alt="Updated-Image">-</div>-<div-class="buttons-wrapper">-<div-class="buttons-container">-<!---24-buttons-with-placeholder-images--->-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-<button-class="button"><img-src="https://via.placeholder.com/250"-alt="Placeholder"></button>-</div>-</div>-</body>-</html>
