55 lines
2.7 KiB
TypeScript
55 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
export default function TestTailwind() {
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 p-8">
|
|
<div className="max-w-2xl mx-auto">
|
|
<h1 className="text-4xl font-bold text-blue-600 mb-8">Test Tailwind CSS v4</h1>
|
|
|
|
<div className="space-y-6">
|
|
{/* Test des couleurs de base */}
|
|
<div className="bg-white p-6 rounded-lg shadow-lg">
|
|
<h2 className="text-2xl font-semibold mb-4">Couleurs de base</h2>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="h-16 bg-red-500 rounded flex items-center justify-center text-white">Red</div>
|
|
<div className="h-16 bg-blue-500 rounded flex items-center justify-center text-white">Blue</div>
|
|
<div className="h-16 bg-green-500 rounded flex items-center justify-center text-white">Green</div>
|
|
<div className="h-16 bg-yellow-500 rounded flex items-center justify-center text-black">Yellow</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test des espacements */}
|
|
<div className="bg-white p-6 rounded-lg shadow-lg">
|
|
<h2 className="text-2xl font-semibold mb-4">Espacements</h2>
|
|
<div className="space-y-2">
|
|
<div className="p-2 bg-gray-200">p-2</div>
|
|
<div className="p-4 bg-gray-300">p-4</div>
|
|
<div className="p-6 bg-gray-400">p-6</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test des couleurs personnalisées */}
|
|
<div className="bg-white p-6 rounded-lg shadow-lg">
|
|
<h2 className="text-2xl font-semibold mb-4">Couleurs personnalisées Banquise</h2>
|
|
<div className="space-y-2">
|
|
<div className="text-banquise-blue p-2">Texte banquise-blue</div>
|
|
<div className="bg-banquise-blue text-white p-2 rounded">Background banquise-blue</div>
|
|
<div className="text-banquise-blue-dark p-2">Texte banquise-blue-dark</div>
|
|
<div className="bg-banquise-blue-dark text-white p-2 rounded">Background banquise-blue-dark</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test des animations */}
|
|
<div className="bg-white p-6 rounded-lg shadow-lg">
|
|
<h2 className="text-2xl font-semibold mb-4">Animations</h2>
|
|
<div className="space-y-4">
|
|
<div className="animate-pulse bg-blue-200 p-4 rounded">Pulse animation</div>
|
|
<div className="animate-bounce bg-green-200 p-4 rounded inline-block">Bounce animation</div>
|
|
<div className="animate-gentle-float bg-yellow-200 p-4 rounded inline-block">Custom gentle float</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |