Composants Composants de mise en page Glassmorphism Aménagement d’entreprise

Glassmorphism Aménagement d’entreprise

Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.

Aperçu

HTML Code

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
    <p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
    <div class="mt-6 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
        <p>Contact Information:</p>
        <p>Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
    </div>
  </div>
</div>

Composants associés

Mise en page RetroBlog

Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.

Ouvrir

Composant de mise en page 3D

Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.

Ouvrir

Disposition du lecteur de musique Cyberpunk

Une disposition de lecteur de musique sur le thème cyberpunk avec une esthétique néon futuriste, des arrière-plans sombres et des couleurs d’accentuation vibrantes, conçue pour la réactivité et la prise en charge du mode sombre.

Ouvrir