JSFiddle - React, Tailwind, and code Playground

by thelittlewozniak

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordéon avec aperçu</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

<div class="container">
    <h1 class="mb-4">Liste des clients</h1>

    <div class="accordion" id="clientsAccordion">
        
        <!-- CLIENT 1 -->
        <div class="accordion-item mb-3">
            <h2 class="accordion-header">
                <!-- Aperçu toujours visible -->
                <div class="p-3 bg-white border-bottom">
                    <strong>Nom :</strong> Jean Dupont<br>
                    <strong>Email :</strong> [email protected]
                </div>
                <!-- Bouton pour voir plus -->
                <button class="accordion-button collapsed" type="button" 
                        data-bs-toggle="collapse" data-bs-target="#client1">
                    Voir plus
                </button>
            </h2>
            <div id="client1" class="accordion-collapse collapse">
                <div class="accordion-body">
                    <p><strong>Adresse :</strong> 123 Rue Exemple, Bruxelles</p>
                    <p><strong>Téléphone :</strong> +32 123 456 789</p>
                    <p><strong>Note :</strong> Client fidèle depuis 2018</p>
                </div>
            </div>
        </div>

        <!-- CLIENT 2 -->
        <div class="accordion-item mb-3">
            <h2 class="accordion-header">
                <div class="p-3 bg-white border-bottom">
                    <strong>Nom :</strong> Marie Leroy<br>
                    <strong>Email :</strong> [email protected]
                </div>
                <button class="accordion-button collapsed" type="button" 
                        data-bs-toggle="collapse" data-bs-target="#client2">
...