Komponente "Brutalistische Säulen"
Eine komplexe Spaltenkomponente in einem brutalistischen Design mit einem monochromen Farbschema, das sich für den Konsum von Blogs oder Inhalten eignet. Das Design zeichnet sich durch einen hohen Kontrast und ungewöhnliche Layouts aus und unterstützt den Dunkelmodus.
HTML-Code
<div class="container mx-auto p-6">
<h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Brutalist Columns Component</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">Animi, cupiditate! Doloremque aperiam sit perspiciatis quam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/202" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">Qui facere, necessitatibus quos aut eius optio deserunt.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/203" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 4</h2>
<p class="text-gray-700 dark:text-gray-300">Aliquam explicabo, at velit? Voluptate, facere voluptatem?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/204" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 5</h2>
<p class="text-gray-700 dark:text-gray-300">Adipisci veniam, nobis porro repellat quo beatae impedit?</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/400/205" alt="Random Image" class="rounded-t-lg mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Column Title 6</h2>
<p class="text-gray-700 dark:text-gray-300">Perferendis est provident, voluptatum dolor cumque atque.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-900 dark:text-gray-100">Author Name</span>
</div>
</div>
</div>
</div>Verwandte Komponenten
Spalten-Komponente
Eine responsive Spaltenkomponente, die nach Material Design-Prinzipien entwickelt wurde und Tailwind CSS für das Styling, die Unterstützung dunkler Designs und reaktionsschnelle Animationen verwendet.
Spalten-Komponente
Eine responsive Spaltenkomponente, die mit Glassmorphism entwickelt wurde und ein triadisches Farbschema für eine Business-/Corporate-Website verwendet. Es verfügt über glasfaserähnliche durchscheinende Elemente, Unschärfeeffekte und ist für den Dunkelmodus geeignet.
Spalten-Komponente
Eine reaktionsschnelle Spaltenkomponente, die für die Präsentation von Portfolios mit Unterstützung für den Dunkelmodus entwickelt wurde, unter Verwendung eines Graustufen-Farbschemas und Tailwind CSS.