-css +tailwind

frontend/src/pages/ProductDescription.tsx

@@ -2,7 +2,6 @@ import { useQuery } from "@apollo/client";
 import { GET_PRODUCT_BY_ID } from "../graphql/queries";
 import { useParams } from "react-router-dom";
 import { Card, Button, Typography, Row, Col, Divider } from "antd";
-import "../styles/productDescription.css";
 
 const { Title, Text } = Typography;
 
@@ -24,29 +23,20 @@ const ProductDescription = () => {
     const { title, imgUrl, price, description } = data.getOneProductById;
 
     return (
-      <Card
-        hoverable
-        className="product-card"
-        style={{ maxWidth: 1000, margin: "20px auto", padding: "20px" }}
-      >
+      <Card hoverable className="max-w-4xl mx-auto my-5 p-5">
         <Row gutter={[16, 16]}>
           <Col xs={24} md={12}>
             <img
               alt={title}
               src={imgUrl}
-              style={{
-                width: "100%",
-                borderRadius: "8px",
-                objectFit: "cover",
-                height: "100%",
-              }}
+              className="w-full rounded-lg object-cover h-full"
             />
           </Col>
           <Col xs={24} md={12}>
-            <Title>{title}</Title>
-            <Text>{price} €</Text>
+            <Title className="text-xl">{title}</Title>
+            <Text className="text-lg font-semibold">{price} €</Text>
             <Divider />
-            <Text>{description}</Text>
+            <Text className="text-base">{description}</Text>
             <Divider />
             <Button type="primary" size="large" block>
               Réserver