dynamic classes

src/App.tsx

@@ -1,12 +1,14 @@
 const products = [
-    { title: 'Cabbage', id: 1 },
-    { title: 'Garlic', id: 2 },
-    { title: 'Apple', id: 3 },
+    { title: 'Cabbage', isFruit: false, id: 1 },
+    { title: 'Garlic', isFruit: false, id: 2 },
+    { title: 'Apple', isFruit: true, id: 3 },
 ];
 
 function App() {
     const listItems = products.map(product =>
-        <li key={product.id}>
+        <li 
+            key={product.id}
+            className={product.isFruit ? 'text-green-200' : 'text-red-200'}>
             {product.title}
         </li>
     );