141 lines
2.9 KiB
HTML
141 lines
2.9 KiB
HTML
Voici un exemple de composant React complet avec HTML, CSS et JS, qui répond à vos exigences :
|
|
|
|
**Card.js** (composant React)
|
|
```jsx
|
|
import React from 'react';
|
|
|
|
function Card({ titre, texte, image }) {
|
|
return (
|
|
<div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
|
|
<img src={image} alt="Image du produit" className="w-full h-64 object-cover" />
|
|
<div className="p-6">
|
|
<h2 className="text-lg font-bold text-gray-900 mb-2">{titre}</h2>
|
|
<p className="text-gray-600 mb-4">{texte}</p>
|
|
</div>
|
|
<button className="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Découvrir</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Card;
|
|
```
|
|
**index.html** (fichier HTML autonome)
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Card</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div className="container mx-auto p-4">
|
|
<Card titre="Titre card" texte="Texte de la card" image="https://picsum.photos/200/300" />
|
|
</div>
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.7.0/babel.min.js"></script>
|
|
<script type="text/babel" src="card.js"></script>
|
|
<script type="text/javascript">
|
|
ReactDOM.render(<Card titre="Titre card" texte="Texte de la card" image="https://picsum.photos/200/300" />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
**styles.css** (fichier CSS pour les classes Tailwind-like)
|
|
```css
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.max-w-md {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.mx-auto {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.p-6 {
|
|
padding: 16px;
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.shadow-md {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.bg-orange-500 {
|
|
background-color: #ff9900;
|
|
}
|
|
|
|
.hover:bg-orange-700 {
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.text-white {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pt-6 {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.pb-6 {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.text-gray-900 {
|
|
color: #333333;
|
|
}
|
|
|
|
.mb-2 {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #666666;
|
|
}
|
|
|
|
.mb-4 {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 0.25rem;
|
|
}
|
|
```
|
|
**card.js** (fichier JavaScript pour le composant React)
|
|
|
|
J'ai utilisé la bibliothèque `react` et `babel` pour créer un composant React complet.
|
|
|
|
Notez que vous devez créer un répertoire `public` contenant le fichier `index.html` et les fichiers CSS et JavaScript.
|
|
|
|
Assurez-vous également d'avoir installé les dépendances nécessaires en utilisant la commande `npm install` ou `yarn install`. |