Tailwind Css
E Commerce
Template
Responsive
Utility First
Catalogue
Animations
Boutique
Html
Css
Template e-commerce moderne avec Tailwind CSS utility-first, catalogue produits responsive avec filtres, badges et animations fluides.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template E Commerce Tailwindcss 2026 04291651 | AngularForAll</title>
<!-- Tailwind CSS CDN (Play CDN) -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- Navbar Tailwind -->
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-3">
<div class="flex items-center gap-2">
<svg class="w-8 h-8 text-amber-700" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
<span class="font-bold text-xl text-gray-800">Arti<span class="text-amber-700">Sens</span></span>
</div>
<div class="hidden md:flex gap-6 text-gray-600">
<a href="#" class="hover:text-amber-700 transition">Accueil</a>
<a href="#" class="hover:text-amber-700 transition">Collection</a>
<a href="#" class="hover:text-amber-700 transition">Atelier</a>
<a href="#" class="hover:text-amber-700 transition">Inspiration</a>
</div>
<div class="flex gap-2">
<button class="p-2 rounded-full hover:bg-gray-100 transition">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6M17 13l1.5 6M9 21h6M12 15v6"/>
</svg>
Panier
</button>
</div>
</div>
</div>
</nav>
<!-- Hero section Tailwind -->
<div class="container mx-auto px-4 py-12 text-center">
<div class="inline-flex items-center gap-2 bg-amber-50 rounded-full px-4 py-1.5 mb-4">
<span class="w-2 h-2 bg-amber-600 rounded-full"></span>
<span class="text-xs font-medium text-amber-800 tracking-wide">✦ ÉDITION LIMITÉE ✦</span>
</div>
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-gray-900 mb-3">
Créations d'exception
</h1>
<p class="text-lg text-gray-500 max-w-2xl mx-auto">
Des objets façonnés à la main, matières nobles et design intemporel.
</p>
<div class="flex flex-wrap justify-center gap-2 mt-6">
<span class="px-3 py-1.5 bg-white rounded-full text-xs font-medium text-gray-600 shadow-sm border">🏺 Céramique</span>
<span class="px-3 py-1.5 bg-white rounded-full text-xs font-medium text-gray-600 shadow-sm border">🪵 Bois</span>
<span class="px-3 py-1.5 bg-white rounded-full text-xs font-medium text-gray-600 shadow-sm border">🧵 Textile</span>
<span class="px-3 py-1.5 bg-white rounded-full text-xs font-medium text-gray-600 shadow-sm border">♻️ Upcyclé</span>
</div>
</div>
<!-- Grille produits Tailwind Cards -->
<div class="container mx-auto px-4 py-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Carte 1 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="relative">
<span class="absolute top-3 left-3 bg-amber-100 text-amber-800 text-xs font-semibold px-2.5 py-1 rounded-full">✦ Édition rare</span>
<img src="public/baff.webp" alt="Vase" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Céramique</span>
<div class="text-amber-400 text-sm">★★★★★ <span class="text-gray-400 text-xs ml-1">(48)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Vase « Argile vive »</h3>
<p class="text-sm text-gray-500 mb-3">Pièce unique tournée à la main, émail réactif terre cuite.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-2xl font-bold text-gray-900">89€</span>
<span class="text-gray-400 line-through text-sm ml-1">120€</span>
</div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
<!-- Carte 2 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="relative">
<span class="absolute top-3 left-3 bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-1 rounded-full">🌿 Nouveauté</span>
<img src="public/mosquee.jpeg" alt="Bougie" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Bien-être</span>
<div class="text-amber-400 text-sm">★★★★★ <span class="text-gray-400 text-xs ml-1">(128)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Bougie « Bois sacré »</h3>
<p class="text-sm text-gray-500 mb-3">Cire végétale, santal & vanille, 50h de combustion.</p>
<div class="flex justify-between items-center">
<div><span class="text-2xl font-bold text-gray-900">39€</span></div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
<!-- Carte 3 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<img src="public/smartwash.webp" alt="Sac lin" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Accessoire</span>
<div class="text-amber-400 text-sm">★★★★☆ <span class="text-gray-400 text-xs ml-1">(95)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Sac bandoulière lin</h3>
<p class="text-sm text-gray-500 mb-3">Teinture indigo naturelle, upcyclé, poches intérieures.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-2xl font-bold text-gray-900">74€</span>
<span class="text-gray-400 line-through text-sm ml-1">98€</span>
</div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
<!-- Carte 4 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="relative">
<span class="absolute top-3 left-3 bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-1 rounded-full">🔥 -30%</span>
<img src="public/phoneL.webp" alt="Plateau" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Décoration</span>
<div class="text-amber-400 text-sm">★★★★★ <span class="text-gray-400 text-xs ml-1">(61)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Plateau « Noyer brut »</h3>
<p class="text-sm text-gray-500 mb-3">Bois massif français, finition huile d'olive.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-2xl font-bold text-gray-900">59€</span>
<span class="text-gray-400 line-through text-sm ml-1">85€</span>
</div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
<!-- Carte 5 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<div class="relative">
<span class="absolute top-3 left-3 bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-1 rounded-full">⭐ Coup de cœur</span>
<img src="public/mosquee.jpeg" alt="Plaid" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
</div>
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Textile</span>
<div class="text-amber-400 text-sm">★★★★★ <span class="text-gray-400 text-xs ml-1">(204)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Plaid « Forêt sylvestre »</h3>
<p class="text-sm text-gray-500 mb-3">Mérinos & alpaga, tissage main, douceur exceptionnelle.</p>
<div class="flex justify-between items-center">
<div><span class="text-2xl font-bold text-gray-900">149€</span></div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
<!-- Carte 6 -->
<div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
<img src="public/bg1.webp" alt="Carnet" class="w-full h-64 object-cover rounded-t-xl" loading="lazy">
<div class="p-4">
<div class="flex justify-between items-center mb-2">
<span class="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded-full">Papeterie</span>
<div class="text-amber-400 text-sm">★★★★★ <span class="text-gray-400 text-xs ml-1">(37)</span></div>
</div>
<h3 class="text-lg font-bold text-gray-800 mb-1">Carnet « Atelier nomade »</h3>
<p class="text-sm text-gray-500 mb-3">Papier coton, reliure cuir végétal, fabrication main.</p>
<div class="flex justify-between items-center">
<div><span class="text-2xl font-bold text-gray-900">34€</span></div>
<button class="bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-700 transition flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
Ajouter
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Section avantages Tailwind -->
<div class="container mx-auto px-4 my-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-xl shadow-sm text-center">
<svg class="w-10 h-10 mx-auto text-amber-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 13l4 4L19 7"/></svg>
<h5 class="font-bold text-gray-800">Livraison offerte</h5>
<p class="text-xs text-gray-500">Dès 60€ d'achat, France métropolitaine</p>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm text-center">
<svg class="w-10 h-10 mx-auto text-amber-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<h5 class="font-bold text-gray-800">Retours faciles</h5>
<p class="text-xs text-gray-500">30 jours pour échanger votre création</p>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm text-center">
<svg class="w-10 h-10 mx-auto text-amber-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
<h5 class="font-bold text-gray-800">Artisanat local</h5>
<p class="text-xs text-gray-500">Pièces uniques & savoir-faire</p>
</div>
</div>
</div>
<!-- Footer Tailwind -->
<footer class="bg-white border-t border-gray-200 py-6 mt-8">
<div class="container mx-auto px-4 text-center">
<p class="text-xs text-gray-400">© 2025 ArtiSens — Collection artisanale contemporaine. Sans CSS personnalisé, uniquement Tailwind.</p>
</div>
</footer>
<!-- Script pour les interactions des boutons -->
<script>
(function() {
const buttons = document.querySelectorAll('.bg-gray-800.text-white.rounded-full');
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const card = btn.closest('.bg-white.rounded-xl');
const productName = card?.querySelector('h3')?.innerText || 'produit';
alert(`✨ "${productName}" ajouté à votre panier (Tailwind CSS pur, zéro CSS additionnel).`);
});
});
// console.log("Tailwind CSS — page produit 100% classes utilitaires, sans CSS personnalisé.");
})();
</script>
</body>
</html>
Télécharger le fichier source