List Group Tailwind | AngularForAll

Tailwind List Tailwind Design Template Html Integration List Dashboard
List Group Tailwind optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="copyright" content="MEZGANI Said" />
  <meta name="author" content="AngularForAll" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Snippet List Ul Li Tailwind 2026 23040044 | AngularForAll</title>
<!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Police Inter & petite config optionnelle -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Inter', sans-serif; }
    /* Classes personnalisées pour puces / compteurs complexes (Tailwind ne gère pas tout nativement) */
    .list-style-1 li { position: relative; padding-left: 1.8rem; }
    .list-style-1 li::before { content: "✨"; position: absolute; left: 0; color: #3b82f6; }
    .list-style-3 li { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2310b981" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>') left center no-repeat; background-size: 1.3rem; padding-left: 2rem; }
    .list-style-6 { counter-reset: card-counter; }
    .list-style-6 li { counter-increment: card-counter; position: relative; padding-left: 2.5rem; }
    .list-style-6 li::before { content: counter(card-counter); background: #2563eb; color: white; font-weight: bold; width: 1.8rem; height: 1.8rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 0; top: -2px; font-size: 0.9rem; }
    .list-style-10 li { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ef4444" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>') left center no-repeat; background-size: 1.2rem; padding-left: 1.8rem; transition: padding-left 0.2s; border-radius: 0.5rem; }
    .list-style-10 li:hover { background-color: #fef2f2; padding-left: 2.2rem; }
  </style>
</head>
<body class="bg-slate-100 p-6 md:p-8">

<div class="max-w-7xl mx-auto">
  <!-- En-tête -->
  <div class="mb-8 flex flex-wrap items-center gap-3">
    <h1 class="text-3xl md:text-4xl font-bold text-slate-800 tracking-tight">📋 10 cartes · <span class="text-blue-600">ul / li</span> stylisées</h1>
    <span class="bg-blue-100 text-blue-700 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">Tailwind CSS</span>
  </div>

  <!-- Grille de cartes responsive -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    
    <!-- CARD 1 : puces étoiles personnalisées -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-200 p-5 flex flex-col">
      <div class="flex items-center gap-2 mb-3 pb-1 border-b border-slate-100">
        <span class="text-yellow-500 text-xl">⭐</span>
        <h3 class="font-semibold text-lg text-slate-800">Priorités projet</h3>
      </div>
      <ul class="list-style-1 space-y-2 text-slate-700 font-medium">
        <li>Analyse des besoins utilisateurs</li>
        <li>Design system & composants</li>
        <li>Développement front-end</li>
        <li>Revue de code & accessibilité</li>
      </ul>
      <div class="mt-4 text-xs text-slate-400">✨ 4 étapes clés</div>
    </div>

    <!-- CARD 2 : style bloc encadré + bordure gauche verte -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5 flex flex-col">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-emerald-600 text-xl">✅</span>
        <h3 class="font-semibold text-lg text-slate-800">Objectifs validés</h3>
      </div>
      <ul class="space-y-2">
        <li class="bg-slate-50 rounded-full px-4 py-2.5 border-l-8 border-emerald-500 font-medium text-slate-700 flex items-center gap-2"><span class="text-emerald-500">→</span> Augmentation du CA +18%</li>
        <li class="bg-slate-50 rounded-full px-4 py-2.5 border-l-8 border-emerald-500 font-medium text-slate-700 flex items-center gap-2"><span class="text-emerald-500">→</span> Satisfaction client > 92%</li>
        <li class="bg-slate-50 rounded-full px-4 py-2.5 border-l-8 border-emerald-500 font-medium text-slate-700 flex items-center gap-2"><span class="text-emerald-500">→</span> Déploiement continu</li>
      </ul>
    </div>

    <!-- CARD 3 : check circle (SVG) -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-emerald-500 text-xl">🟢</span>
        <h3 class="font-semibold text-lg text-slate-800">Checklist QA</h3>
      </div>
      <ul class="list-style-3 space-y-2.5 text-slate-700">
        <li>Tests unitaires & intégration</li>
        <li>Audit Lighthouse > 95</li>
        <li>Compatibilité mobile</li>
        <li>Validation W3C</li>
      </ul>
    </div>

    <!-- CARD 4 : icônes + séparateurs (avec emoji / fallback) -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3 border-b border-slate-100 pb-2">
        <span class="text-blue-500 text-xl">🧩</span>
        <h3 class="font-semibold text-lg text-slate-800">Modules actifs</h3>
      </div>
      <ul class="divide-y divide-slate-200">
        <li class="py-3 flex items-center gap-3"><span class="text-indigo-500 w-5 text-center">📄</span> Authentification</li>
        <li class="py-3 flex items-center gap-3"><span class="text-indigo-500 w-5 text-center">📊</span> Tableau de bord</li>
        <li class="py-3 flex items-center gap-3"><span class="text-indigo-500 w-5 text-center">✉️</span> Messagerie</li>
        <li class="py-3 flex items-center gap-3"><span class="text-indigo-500 w-5 text-center">⚙️</span> Paramètres</li>
      </ul>
    </div>

    <!-- CARD 5 : étiquettes (tags) -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-sky-600 text-xl">🏷️</span>
        <h3 class="font-semibold text-lg text-slate-800">Compétences</h3>
      </div>
      <ul class="flex flex-wrap gap-2">
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">React</li>
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">TypeScript</li>
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">Tailwind</li>
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">Node.js</li>
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">UX design</li>
        <li class="bg-blue-100 text-blue-800 px-4 py-1.5 rounded-full text-sm font-medium">Python</li>
      </ul>
      <div class="mt-4 text-xs text-slate-400">6 technologies</div>
    </div>

    <!-- CARD 6 : numérotation cerclée -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-blue-600 text-xl">🔢</span>
        <h3 class="font-semibold text-lg text-slate-800">Top 4 priorités</h3>
      </div>
      <ul class="list-style-6 space-y-4 text-slate-700 font-medium">
        <li>Refonte page d’accueil</li>
        <li>Optimisation SEO</li>
        <li>Intégration API paiement</li>
        <li>Newsletter & rétention</li>
      </ul>
    </div>

    <!-- CARD 7 : icônes avec style gradient (via emoji unicode) -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-purple-500 text-xl">🎨</span>
        <h3 class="font-semibold text-lg text-slate-800">Design tokens</h3>
      </div>
      <ul class="space-y-3">
        <li class="flex items-center gap-3"><span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500 text-2xl leading-5">⬤</span> Couleurs primaires</li>
        <li class="flex items-center gap-3"><span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500 text-2xl leading-5">🔤</span> Typographie Inter</li>
        <li class="flex items-center gap-3"><span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500 text-2xl leading-5">📏</span> Espacements 8px</li>
        <li class="flex items-center gap-3"><span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500 text-2xl leading-5">💧</span> Ombres cohérentes</li>
      </ul>
    </div>

    <!-- CARD 8 : cartes secondaires (li comme cartouche) -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-amber-600 text-xl">📂</span>
        <h3 class="font-semibold text-lg text-slate-800">Ressources</h3>
      </div>
      <ul class="space-y-2">
        <li class="border border-slate-200 rounded-xl px-4 py-3 bg-slate-50/50 hover:bg-white hover:border-slate-300 transition flex items-center gap-2"><span class="text-red-500">📕</span> Documentation.pdf</li>
        <li class="border border-slate-200 rounded-xl px-4 py-3 bg-slate-50/50 hover:bg-white hover:border-slate-300 transition flex items-center gap-2"><span class="text-green-600">📊</span> Chiffres clés.xlsx</li>
        <li class="border border-slate-200 rounded-xl px-4 py-3 bg-slate-50/50 hover:bg-white hover:border-slate-300 transition flex items-center gap-2"><span class="text-blue-500">🖼️</span> Assets graphiques</li>
      </ul>
    </div>

    <!-- CARD 9 : mode flex / badges sombres -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-gray-700 text-xl">#️⃣</span>
        <h3 class="font-semibold text-lg text-slate-800">Hashtags tendance</h3>
      </div>
      <ul class="flex flex-wrap gap-2">
        <li class="bg-gray-800 text-gray-100 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">#webdev</li>
        <li class="bg-gray-800 text-gray-100 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">#tailwind</li>
        <li class="bg-gray-800 text-gray-100 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">#css</li>
        <li class="bg-gray-800 text-gray-100 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">#frontend</li>
        <li class="bg-gray-800 text-gray-100 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm">#ux</li>
      </ul>
    </div>

    <!-- CARD 10 : flèche + hover slide -->
    <div class="bg-white rounded-2xl shadow-md hover:shadow-xl p-5">
      <div class="flex items-center gap-2 mb-3">
        <span class="text-red-500 text-xl">➡️</span>
        <h3 class="font-semibold text-lg text-slate-800">Prochaines étapes</h3>
      </div>
      <ul class="list-style-10 space-y-1.5 text-slate-700">
        <li class="py-2">Réunion de lancement</li>
        <li class="py-2">Atelier idéation</li>
        <li class="py-2">Prototypage Figma</li>
        <li class="py-2">Revue sprint</li>
      </ul>
    </div>
  </div>

  <!-- Note de bas de page -->
  <div class="mt-10 pt-6 border-t border-slate-200 text-slate-400 text-sm text-center">
    ⚡ 10 exemples de cartes avec <code class="bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">&lt;ul&gt; &lt;li&gt;</code> stylisés – puces, icônes, compteurs, tags · Tailwind CSS
  </div>
</div>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
