Interaktive Komponenten

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit 3D-Design, monochromatischem Farbschema und mittlerer Komplexität für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                
<div class="bg-gray-100 dark:bg-gray-800 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
      <p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
    </div>
    <div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Repeat product block for more products -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

       <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

BrutalismusPortfolioInteraktiv

Interaktive Komponentenkomponente mit Brutalismus-Design, leuchtenden Farben und komplexem Layout für Portfoliozwecke, reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="bg-gray-900 dark:bg-black p-8 min-h-screen">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-yellow-400 dark:bg-pink-600 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Alpha</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Alpha, showcasing its features and impact.</p>
      <a href="#" class="inline-block bg-black text-yellow-400 dark:bg-white dark:text-pink-600 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">Learn More</a>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-pink-600 dark:bg-yellow-400 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Beta</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Beta, highlighting its innovative aspects.</p>
      <a href="#" class="inline-block bg-black text-pink-600 dark:bg-white dark:text-yellow-400 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">View Case Study</a>
    </div>

    <!-- Interactive Contact Form -->
    <div class="md:col-span-2 bg-teal-400 dark:bg-purple-600 p-8 border-4 border-black dark:border-white shadow-brutal">
      <h3 class="text-3xl font-bold mb-6 text-black dark:text-white">Get in Touch</h3>
      <form action="#" method="post">
        <div class="mb-4">
          <label for="name" class="block text-black dark:text-white text-sm font-bold mb-2">Name:</label>
          <input type="text" id="name" name="name" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-black dark:text-white text-sm font-bold mb-2">Email:</label>
          <input type="email" id="email" name="email" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Email">
        </div>
        <div class="mb-6">
          <label for="message" class="block text-black dark:text-white text-sm font-bold mb-2">Message:</label>
          <textarea id="message" name="message" rows="6" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button type="submit" class="bg-black text-teal-400 dark:bg-white dark:text-purple-600 font-bold py-3 px-6 rounded border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:shadow-outline transition-colors">
            Send Message
          </button>
        </div>
      </form>
    </div>

    <!-- Testimonials/Avatar Section -->
    <div class="md:col-span-2 bg-red-500 dark:bg-blue-600 p-8 border-4 border-black dark:border-white shadow-brutal grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Working with this company was a game-changer!"</p>
        <p class="font-bold text-black dark:text-white">- Client A</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Highly recommended for their creativity and skill."</p>
        <p class="font-bold text-black dark:text-white">- Client B</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar 3" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"They exceeded all expectations!"</p>
        <p class="font-bold text-black dark:text-white">- Client C</p>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-brutal {
  box-shadow: 8px 8px 0 0 #000;
}

.dark .shadow-brutal {
  box-shadow: 8px 8px 0 0 #fff;
}
</style>

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 öffnen

                <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>

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit Skeuomorphismus-Design, analogem Farbschema und mittlerer Komplexität für Blog-/Content-Zwecke. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript-Code.

Vorschau öffnen

                <div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
    <div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex justify-between items-center mt-4">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
      <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
    </div>
    <button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
  </div>
  <div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
      </svg>
      <span>Save</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

Komponente "Interaktive Komponenten"

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

Vorschau öffnen

                <div class="bg-gray-900 text-gray-100 min-h-screen p-6">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
        <div class="p-4 border-b border-gray-700">
            <h2 class="text-xl font-bold">Interactive Components</h2>
            <p class="text-gray-400">Engage with your network in style.</p>
        </div>
        <div class="flex items-center p-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h3 class="font-semibold">John Doe</h3>
                <p class="text-gray-500 text-sm">@johndoe</p>
            </div>
        </div>
        <div class="p-4">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
            <p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
        </div>
        <div class="flex justify-between p-4 border-t border-gray-700">
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
        </div>
    </div>
</div>

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit minimalistischem/flachem Design, Farbschema in Erdtönen und komplexer Komplexität für einen Dashboard-Zweck, implementiert mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Vorschau öffnen

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Header -->
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
      </div>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
    </div>
  </header>

  <!-- Main Content -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Card 1: Sales Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <!-- Placeholder for chart/graph -->
      <div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
        Chart or Graph Placeholder
      </div>
    </div>

    <!-- Card 2: Recent Orders -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
      <ul>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1001</span>
          <span class="text-green-600 dark:text-green-400">$150.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1002</span>
          <span class="text-green-600 dark:text-green-400">$220.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1003</span>
          <span class="text-green-600 dark:text-green-400">$95.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1004</span>
          <span class="text-green-600 dark:text-green-400">$310.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1005</span>
          <span class="text-green-600 dark:text-green-400">$180.00</span>
        </li>
      </ul>
    </div>

    <!-- Card 3: User Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
      <!-- Placeholder for activity feed -->
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
      </ul>
    </div>

    <!-- Card 4: Statistics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
        </div>
      </div>
    </div>

    <!-- Card 5: Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
      </div>
    </div>

    <!-- Card 6: Image Gallery (using picsum.photos) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
      <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
        <img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
        <img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
        <img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
      </div>
    </div>

  </div>

</div>

Komponente "Interaktive Komponenten von Neumorphism"

Neumorphism Interactive Components Komponente für Business-/Unternehmenswebsites

Vorschau öffnen

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  
  <!-- Complex Component Section -->
  <section class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Interactive Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-blue-500 text-white text-lg font-semibold shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-green-500 text-white text-lg font-semibold shadow-lg hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-red-500 text-white text-lg font-semibold shadow-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300">Learn More</button>
      </div>
      
      <!-- Interactive Form Example -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3">
          <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Contact Us</h3>
          <form>
              <div class="mb-4">
                  <label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Name</label>
                  <input type="text" id="name" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                  <input type="email" id="email" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Message</label>
                  <textarea id="message" rows="4" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-700 text-gray-800 dark:text-gray-200"></textarea>
              </div>
              <button type="submit" class="py-2 px-6 rounded-full bg-gray-500 text-white text-lg font-semibold shadow-lg hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 transition duration-300">Send Message</button>
          </form>
      </div>

       <!-- Interactive Element with Image -->
        <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3 flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/seed/interactive/300/200" alt="Interactive Image" class="rounded-lg mb-6 md:mb-0 md:mr-8 shadow-xl">
            <div>
                <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Interactive Feature with Image</h3>
                <p class="text-gray-700 dark:text-gray-300 mb-6">This section includes an image to make the interactive element more engaging visually.</p>
                <button class="py-2 px-6 rounded-full bg-yellow-500 text-white text-lg font-semibold shadow-lg hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300">Explore Feature</button>
            </div>
        </div>

    </div>
  </section>

  <!-- Custom Shadows for Neumorphism -->
  <style>
    .shadow-2xl-dark {
      box-shadow: 9px 9px 16px #1c1c1c, -9px -9px 16px #262626;
    }
    .shadow-inner-dark {
      box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #262626;
    }
  </style>

</div>

Komponente "Interaktive Komponenten"

Interaktive 3D-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen

Vorschau öffnen

                <div class="dark:bg-gray-900 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase dark:text-indigo-400">Interactive</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
                A new way to engage
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>

        <div class="mt-10">
            <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Competitive exchange rates</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a2 2 0 002 2h9l.75-.75M7 16l3.5-3.5M14.25 8.25l.75-.75m0 0l2-2M7 16H3a2 2 0 00-2 2v2a2 2 0 002 2h14a2 2 0 002-2v-2a2 2 0 00-2-2h-4m5-10l2 2m0 0l2 2m0-4l-2-2m0 0l-2-2m-3 10l3.5-3.5" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">No hidden fees</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Transfers are instant</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4m-4 2h4M9 10H4a2 2 0 00-2 2v7a2 2 0 002 2h16a2 2 0 002-2v-7a2 2 0 00-2-2h-5l-.5-1.5z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Mobile notifications</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

Komponente "Interaktive Komponenten"

Material Design Interactive Components Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau öffnen

                <script src="https://cdn.tailwindcss.com"></script>

<style>
  /* Add Material Design inspired button styles */
  .material-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 0.25rem;
      transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .material-button:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Add Material Design card styles */
  .material-card {
      border-radius: 0.5rem;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
      transition: box-shadow 0.15s ease-in-out;
  }

   .material-card:hover {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  /* Respond to dark mode */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
        --tw-bg-opacity: 1;
        background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
    }
    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }
     .dark\:bg-blue-700 {
        --tw-bg-opacity: 1;
        background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
    }
     .dark\:hover\:bg-blue-800:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
     }
      .dark\:bg-gray-700 {
          --tw-bg-opacity: 1;
          background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
      }
       .dark\:border-gray-600 {
          --tw-border-opacity: 1;
          border-color: rgba(75, 85, 99, var(--tw-border-opacity));
       }
  }
</style>

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="material-card w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6">
    <div class="flex justify-center mb-6">
      <img class="w-24 h-24 rounded-full border-4 border-blue-500 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
    </div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    <div class="flex justify-around">
      <button class="material-button bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
        Follow
      </button>
      <button class="material-button bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
        Message
      </button>
    </div>
  </div>
</div>

Komponente "Interaktive Komponenten"

Eine interaktive 3D-Komponente, die Karten mit Tiefeneffekten, responsivem Design und Unterstützung für dunkle Themen präsentiert.

Vorschau öffnen

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
    </div>
</div>

Kategorien