Tag-Cloud-Komponente
Eine reaktionsschnelle Tag-Cloud-Komponente, die für die Benutzeroberfläche im Dunkelmodus entwickelt wurde und ein Portfolio mit einem analogen Farbschema präsentiert.
HTML-Code
<div class="bg-gray-900 text-gray-300 p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#WebDesign</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#UI/UX</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Development</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Branding</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Photography</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Illustration</span>
<span class="bg-gray-700 hover:bg-gray-600 transition duration-300 rounded-full px-3 py-1 text-sm font-semibold">#Typography</span>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Featured Work</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=1" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 1</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=2" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 2</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/200/200?random=3" alt="Portfolio Item" />
<div class="p-4">
<h4 class="font-bold">Project Title 3</h4>
<p class="text-gray-400">Short description of the project.</p>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
<span class="ml-2 text-sm">by Author Name</span>
</div>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Tag-Cloud-Komponente
Eine reaktionsschnelle Tag-Cloud-Komponente mit Graustufenfarben und Mikrointeraktionen, die für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen entwickelt wurde.
Tag-Cloud-Komponente
Eine Tag-Cloud-Komponente, die im Neumorphism-Stil entworfen wurde, ein monochromatisches Farbschema für E-Commerce-Zwecke verwendet und dunkles Design mit responsivem Design unterstützt.
Tag-Cloud-Komponente
Eine Tag-Cloud-Komponente mit Neumorphism-Designstil, responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.