Componente contenitore brutalista
Un componente contenitore semplice ma audace progettato con uno stile brutalista e una combinazione di colori vivaci, adatto per siti Web aziendali o aziendali, che supporta la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4">
<div class="bg-yellow-400 dark:bg-yellow-600 border-4 border-red-800 dark:border-red-500 rounded-lg shadow-xl p-6">
<h1 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4">Business Title</h1>
<p class="text-base text-gray-800 dark:text-gray-200 mb-6">This is a simple yet bold container designed for a business or corporate website. The design embraces a brutalist style with vibrant colors.</p>
<img src="https://picsum.photos/400/200" alt="Random Image" class="w-full h-auto rounded-lg mb-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-900 dark:border-blue-200 mr-2">
<div class="text-sm">
<p class="font-bold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-700 dark:text-gray-300">CEO, Company Name</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente contenitore 30
Un componente contenitore di progettazione 3D reattivo che incorpora elementi tridimensionali per la profondità e il coinvolgimento con il supporto del tema scuro.
Componente contenitore per l'e-commerce
Componente contenitore per l'e-commerce Glassmorphism con combinazione di colori triadica e layout complesso, incluso il supporto della modalità scura
Contenitore di social media
Un componente contenitore reattivo con colori vivaci, microinterazioni coinvolgenti e supporto per temi scuri, adatto per le interfacce dei social media. Le caratteristiche includono sottili effetti di passaggio del mouse e un layout pulito.