finish list component

finish list component

src/App.js

@@ -8,7 +8,7 @@ function App() {
       <Eingabefeld label="Name" isPassword={false} placeholder="&#xf007;" />
       <p className="from-green-50">tets</p>
       <br></br>
-      <Liste gericht="Pizza" price="€20.00" />
+      <Liste gericht="Pizza" price="€20.00" isColor={true} />
     </div>
   );
 }

src/Components/liste.jsx

@@ -5,10 +5,10 @@ function Liste(props) {
   var price = props.price;
 
   return (
-    <div class="grid grid-cols-3 gap-0">
-      <div>{gericht}</div>
-      <div class="place-content-end">{price}</div>
-      <div>
+    <div class={props.isColor ? "grid grid-cols-5 gap-0 bg-slate-200 p-4" : "grid grid-cols-4 gap-0 bg-white p-4"}>
+      <div class="col-start-1 col-end-1">{gericht}</div>
+      <div class="place-content-end col-start-4 col-end-4">{price}</div>
+      <div class="col-start-5 col-end-5 place-content-end">
         <button>enter</button>
       </div>
     </div>