render RecipeCards in a responsive grid layout

- Display RecipeCards using a responsive grid with Tailwind CSS
- Passed recipe data to RecipeCards component
- Utilized grid layout for different screen sizes with padding and spacing

app/components/RecipeGrid.jsx

@@ -19,3 +19,14 @@ const RecipeGrid = () => {
 
     fetchRecipes();
   }, []);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
+      {recipes.map(recipe => (
+        <RecipeCards key={recipe.id} recipe={recipe} />
+      ))}
+    </div>
+  );
+};
+
+export default RecipeGrid;