RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center font-mono text-gray-800 dark:text-gray-200 p-4">
<!-- Header -->
<header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
<h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
<section class="text-center mb-10">
<h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
<p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
</section>
<section class="grid md:grid-cols-2 gap-8">
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
<h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
<p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
<h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Web Development (Retro & Modern)</li>
<li>Digital Marketing Strategies</li>
<li>Brand Identity & Design</li>
<li>IT Consulting & Solutions</li>
</ul>
</div>
</section>
</main>
<!-- Footer -->
<footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
<p>© 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
</footer>
</div>Composants associés
Glassmorphism E-commerce Feature Layout Component
Glassmorphism E-commerce Feature Layout Component
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.
Composant Composants de mise en page
Un composant de mise en page de tableau de bord réactif avec le style Glassmorphism, une palette de couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comporte une barre latérale et une zone de contenu principale avec des éléments translucides givrés ressemblant à du verre et des effets de flou.