Tailwind Css
E Commerce
Template
Responsive
Variante
Hero Section
Cards
Boutique
Html
Css
Deuxième variante e-commerce Tailwind CSS avec design épuré, section héro, cards produits stylisées et footer structuré en colonnes.
<!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 04291659 | AngularForAll</title>
<!-- Tailwind CSS v3 + CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Personnalisation du thème Tailwind (override couleurs et police) -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'sans': ['Poppins', 'Inter', 'system-ui', 'sans-serif'],
},
colors: {
'product-cream': '#fef8ed',
'product-earth': '#8b6b4a',
'product-clay': '#c48a5c',
'product-sage': '#8faa8c',
},
animation: {
'float': 'float 4s ease-in-out infinite',
'fade-in': 'fadeIn 0.5s ease-out',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-6px)' },
},
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(15px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* styles supplémentaires pour affinage et lissage */
.bg-noise {
background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
background-size: 20px 20px;
}
.card-image-hover {
transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.group:hover .card-image-hover {
transform: scale(1.05);
}
.shadow-soft {
box-shadow: 0 8px 20px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.02);
}
.shadow-elevated {
box-shadow: 0 25px 35px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(200, 180, 150, 0.2);
}
::selection {
background-color: #e1c9b0;
color: #2d2a24;
}
</style>
</head>
<body class="bg-gradient-to-br from-[#fcf9f4] via-[#fefaf5] to-[#faf5ec] font-sans text-[#2b2a27] antialiased bg-noise">
<!-- Navbar Tailwind : minimaliste avec accent -->
<nav class="sticky top-0 z-50 bg-white/85 backdrop-blur-lg border-b border-[#ece3d9] shadow-sm">
<div class="max-w-7xl mx-auto px-5 sm:px-8 py-4 flex items-center justify-between flex-wrap">
<div class="flex items-center gap-2">
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-[#c18f5b] to-[#e6b17e] flex items-center justify-center shadow-md">
<svg class="w-5 h-5 text-white" 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>
</div>
<span class="font-bold text-xl tracking-tight bg-gradient-to-r from-[#8b5e3c] to-[#b47c48] bg-clip-text text-transparent">Atelier<span class="text-stone-700">·Nova</span></span>
</div>
<div class="hidden md:flex gap-6 text-sm font-medium text-stone-600">
<a href="#" class="hover:text-[#b87c4a] transition">Collection</a>
<a href="#" class="hover:text-[#b87c4a] transition">Objets</a>
<a href="#" class="hover:text-[#b87c4a] transition">Inspiration</a>
<a href="#" class="hover:text-[#b87c4a] transition">Atelier</a>
</div>
<div class="flex items-center gap-3">
<button class="p-2 rounded-full hover:bg-stone-100 transition"><svg class="w-5 h-5 text-stone-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-stone-800 text-white px-4 py-2 rounded-full text-sm font-medium shadow-md hover:bg-stone-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>
</nav>
<!-- Hero section - style différent (typographie expressive) -->
<section class="relative max-w-7xl mx-auto px-5 pt-12 pb-8 text-center">
<div class="inline-flex items-center gap-2 bg-amber-50/80 backdrop-blur-sm rounded-full px-4 py-1.5 border border-amber-200/80 shadow-sm mb-5">
<span class="w-2 h-2 bg-[#c28a5c] rounded-full animate-pulse"></span>
<span class="text-xs font-medium text-stone-700 tracking-wide">✦ ÉDITION LIMITÉE ✦</span>
</div>
<h1 class="text-5xl md:text-6xl font-black tracking-tight leading-tight">
<span class="bg-gradient-to-r from-[#6b4c33] via-[#9b6e4a] to-[#bd865b] bg-clip-text text-transparent">L'art des matières</span>
<br><span class="text-stone-800">rencontré le design</span>
</h1>
<p class="text-stone-500 max-w-2xl mx-auto mt-4 text-base">Pièces uniques, façonnées avec des matériaux durables et une âme artisanale. Chaque carte raconte une authenticité nouvelle.</p>
<div class="flex flex-wrap justify-center gap-2 mt-6">
<span class="px-3 py-1.5 bg-white/70 rounded-full text-xs font-medium text-stone-600 shadow-sm border">🌿 Céramique</span>
<span class="px-3 py-1.5 bg-white/70 rounded-full text-xs font-medium text-stone-600 shadow-sm border">📦 Bois noble</span>
<span class="px-3 py-1.5 bg-white/70 rounded-full text-xs font-medium text-stone-600 shadow-sm border">✨ Teintures naturelles</span>
<span class="px-3 py-1.5 bg-white/70 rounded-full text-xs font-medium text-stone-600 shadow-sm border">♻️ Upcycling</span>
</div>
</section>
<!-- Grille produits Tailwind CSS - version cartes modernes "flottantes" avec badge gradient -->
<main class="max-w-7xl mx-auto px-5 py-10">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 auto-rows-fr">
<!-- CARD 1 : Vase organique (style doux, badge minimal) -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-stone-100">
<div class="absolute top-4 left-4 z-10">
<span class="bg-white/70 backdrop-blur-sm text-stone-700 text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-sm tracking-wide">⚡ Coup de cœur</span>
</div>
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/baff.webp" alt="Vase céramique" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#b58454] tracking-wider uppercase">Céramique</span>
<div class="flex text-amber-400 text-sm">★★★★★ <span class="text-stone-400 text-xs ml-1">(48)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Vase « Terra Luna »</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Émail réactif grès, fini minéral. Pièce tournée main, apporte une présence brute et élégante.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">89€</span> <span class="text-stone-400 line-through text-sm ml-1">124€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
<!-- CARD 2 : Bougie parfumée – badge différent, palette plus chaude -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-amber-50">
<div class="absolute top-4 left-4 z-10">
<span class="bg-[#f5e6d3] text-[#a8602c] text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-sm">🌿 Nouveauté</span>
</div>
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/mobile.png" alt="Bougie artisanale" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#ad7a53] tracking-wider uppercase">Bien-être</span>
<div class="flex text-amber-400 text-sm">★★★★★ <span class="text-stone-400 text-xs ml-1">(132)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Bougie « Bois Sacré »</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Cire végétale, notes de santal, encens et fève tonka. Jusqu'à 50h, contenant en verre réemployable.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">39€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
<!-- CARD 3 : Sac en lin (design plus minimal et badge pastel) -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-stone-50">
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/ordinateur-portable-laptop.webp" alt="Sac bandoulière" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#a58465] tracking-wider uppercase">Accessoire</span>
<div class="flex text-amber-400 text-sm">★★★★☆ <span class="text-stone-400 text-xs ml-1">(89)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Sac bandoulière lin & indigo</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Upcyclé, teinture naturelle, bandoulière réglable. Poches intérieures, doublure en coton bio.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">74€</span> <span class="text-stone-400 line-through text-sm ml-1">98€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
<!-- CARD 4 : Plateau noyer (badge -30% avec style différent) -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-amber-50">
<div class="absolute top-4 left-4 z-10">
<span class="bg-rose-100 text-rose-700 text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-sm">🔥 -30%</span>
</div>
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/mosquee.jpeg" alt="Plateau bois" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#b6814b] tracking-wider uppercase">Décoration</span>
<div class="flex text-amber-400 text-sm">★★★★☆ <span class="text-stone-400 text-xs ml-1">(56)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Plateau « Noyer brut »</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Bois de noyer massif, fabrication locale. Idéal pour servir ou exposer vos pièces favorites.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">59€</span> <span class="text-stone-400 line-through text-sm ml-1">85€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
<!-- CARD 5 : Plaid laine (carte aux tons naturels) -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-stone-100">
<div class="absolute top-4 left-4 z-10">
<span class="bg-white/80 backdrop-blur-sm text-stone-700 text-[11px] font-semibold px-2.5 py-1 rounded-full">🌟 Meilleure vente</span>
</div>
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/smartwash.webp" alt="Plaid en laine" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#9b7b5b] tracking-wider uppercase">Textile</span>
<div class="flex text-amber-400 text-sm">★★★★★ <span class="text-stone-400 text-xs ml-1">(218)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Plaid « Forêt & Lichen »</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Mérinos & alpaga, tissage main à mailles larges. Douceur unique et tons sauge, moutarde.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">149€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
<!-- CARD 6 : Carnet de reliure / cuir + badge artisanal -->
<div class="group bg-white rounded-3xl overflow-hidden shadow-soft hover:shadow-elevated transition-all duration-300 hover:-translate-y-2 border border-stone-100/80 flex flex-col">
<div class="relative overflow-hidden bg-stone-50">
<img class="card-image-hover w-full h-72 object-cover transition-transform duration-500"
src="public/mobile3.png" alt="Carnet d'artiste" loading="lazy">
</div>
<div class="p-5 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<span class="text-xs font-semibold text-[#aa7b51] tracking-wider uppercase">Papeterie</span>
<div class="flex text-amber-400 text-sm">★★★★★ <span class="text-stone-400 text-xs ml-1">(37)</span></div>
</div>
<h3 class="text-xl font-bold text-stone-800 mb-1">Carnet « Atelier nomade »</h3>
<p class="text-stone-500 text-sm leading-relaxed mb-4 flex-grow">Papier coton, reliure cuir végétal, fermeture élastique. Bloc-notes fait main, tirage limité.</p>
<div class="flex items-baseline justify-between mt-2">
<div><span class="text-2xl font-black text-stone-800">34€</span></div>
<button class="bg-stone-800 text-white rounded-full px-5 py-2 text-sm font-medium hover:bg-[#9b6e4a] transition shadow-md 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>Ajouter</button>
</div>
</div>
</div>
</div>
<!-- Section valeurs & engagements (design Tailwind différent) -->
<div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 border-t border-stone-200 pt-12">
<div class="flex flex-col items-center text-center gap-2">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-2xl">🌱</div>
<h4 class="font-bold text-stone-700">Engagement durable</h4>
<p class="text-sm text-stone-500">Matières sourcées localement, zéro déchet.</p>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-2xl">🤝</div>
<h4 class="font-bold text-stone-700">Fabrication artisanale</h4>
<p class="text-sm text-stone-500">Chaque pièce est façonnée à la main en Europe.</p>
</div>
<div class="flex flex-col items-center text-center gap-2">
<div class="w-12 h-12 rounded-full bg-amber-50 flex items-center justify-center text-2xl">🚚</div>
<h4 class="font-bold text-stone-700">Livraison neutre en carbone</h4>
<p class="text-sm text-stone-500">Offerte dès 60€, emballages recyclés.</p>
</div>
</div>
<!-- Footer avec liens robots et crédits -->
<footer class="mt-14 text-center text-stone-400 text-xs border-t border-stone-200/60 pt-8 pb-4">
<p>© 2025 Atelier·Nova — Collection inspirée par les matières brutes et le savoir-faire.</p>
</footer>
</main>
<!-- petit script pour l'interaction console et feedback utilisateur (doux) -->
<script>
(function(){
const allBtns = document.querySelectorAll('.bg-stone-800.text-white.rounded-full');
allBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const card = btn.closest('.group');
const productName = card?.querySelector('h3')?.innerText || 'produit';
// console.log(`[Tailwind card] 🛍️ Intérêt : ${productName} (ajout simulation)`);
alert(`✨ "${productName}" ajouté à votre panier — Démo Tailwind CSS avec cartes élégantes.`);
});
});
// console.log("Page produit Tailwind — cards modernes hover, badges personnalisés, grid responsive.");
})();
</script>
</body>
</html>
Télécharger le fichier source