CCHub Logo CCHub Tailwind Collection
Komponenten Interaktive Komponenten Komponente "Interaktive Komponenten"

Komponente "Interaktive Komponenten"

Eine interaktive Komponente mit Glassmorphism-Design, Pastell-Farbschema und einfachem Layout für Blog-Inhalte. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Blog Post Title</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>This is a simple interactive component designed for blog content, featuring a Glassmorphism style with pastel colors.</p>
            <p>It is responsive and supports dark mode.</p>
          </div>
          <div class="pt-4 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <a href="#" class="text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-500">Read More &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Einfache Dashboard-Komponente

Einfache, reaktionsschnelle Dashboard-Komponente mit Material Design-Prinzipien und lebendigem Farbschema.

Offen

Komponente "Interaktive Komponenten"

Eine minimalistische, lebendige und einfache interaktive Komponente, die für Unterhaltungs- und Medienplattformen entwickelt wurde und über Wiedergabe-/Pausensteuerungen, einen Fortschrittsbalken und eine Lautstärkeregelung für Lautsprecher verfügt. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Komponente "Interaktive Komponenten"

Eine interaktive Social-Media-Komponente, die mit Dunkelmodus und monochromatischem Farbschema entwickelt wurde.

Offen