Functional Components Component - Brutalism Style
A functional web component designed in a brutalist style using Tailwind CSS. The component features a bold layout with high contrast, responsive effects, and support for dark themes. It includes placeholder images and avatars for visual appeal.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
<div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
<h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
<p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
This component showcases a raw and bold design aesthetic typical of brutalism.
It emphasizes usability and content over polished interfaces.
</p>
<div class="flex flex-wrap justify-between gap-4">
<div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
<img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
<h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
<p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
</div>
<div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
<img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
<h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
<p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
</div>
</div>
<div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
<h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
<div class="flex items-center gap-4 mt-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
<div>
<h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">Web Developer</p>
</div>
</div>
</div>
</div>
</div>Related Components
Blog Functional Component
Functional Components Component with 3D design, Complementary color scheme, moderate complexity for blogs, responsive with dark theme support. No JS, just HTML and Tailwind.
Functional Components Component
A dashboard component with functional components using Material Design principles, an analogous color scheme, and moderate complexity. The component includes responsive design and dark theme support using Tailwind CSS. No JavaScript is included.
Functional Components Component
Minimalist dashboard functional component with responsive design and dark theme support.