Alle Komponenten

Alle verfügbaren Tailwind CSS-Komponenten durchsuchen

Suchfeld-Komponente

Suchfeldkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen.

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md">
    <input
      type="text"
      class="w-full px-5 py-3 text-gray-800 placeholder-gray-500 bg-white border border-gray-300 rounded-full shadow-lg dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105 focus:scale-105"
      placeholder="Search..."
    />
    <button
      class="absolute inset-y-0 right-0 flex items-center px-4 text-white bg-blue-600 rounded-r-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition transform duration-300 ease-in-out hover:scale-105"
    >
      <svg
        class="w-5 h-5"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        ></path>
      </svg>
    </button>
  </div>
</div>

Komponente "Produktbewertungen"

Eine neumorph gestaltete Produktbewertungskomponente, die Benutzeravatare, Bewertungstext und Sternebewertungen enthält. Es enthält responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen Vorschau

                <div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">This product is amazing! I loved everything about it. Highly recommend!</p>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Good product but needs improvement in quality.</p>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-lg">
        <div class="flex-1">
            <div class="flex items-center mb-1">
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
                <span class="text-gray-300 line-through">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 15.27L16.18 18l-1.64-7.03L18 7.24l-7.19-.61L10 0 9.19 6.63 2 7.24l5.46 3.73L5.82 18z"/>
                    </svg>
                </span>
            </div>
            <p class="text-gray-600 dark:text-gray-300">Not worth the price, but still okay.</p>
        </div>
    </div>
</div>
<style>
    .dark .shadow-lg {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    .bg-white {
        background: #e0e0e0;
        border-radius: 20px;
    }
    .dark .bg-gray-800 {
        background: #2c2c2c;
        border-radius: 20px;
    }
</style>

Infografik-Komponente

Eine reaktionsschnelle Infografik-Komponente mit kleinen, ansprechenden Animationen, die mit Unterstützung für dunkle Themen auf Benutzeraktionen reagieren, erstellt mit Tailwind CSS.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
    <div class="flex flex-wrap">
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
                <p class="text-gray-600 dark:text-gray-400">50%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
                <p class="text-gray-600 dark:text-gray-400">70%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
                <p class="text-gray-600 dark:text-gray-400">30%</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
        <div class="flex flex-wrap">
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Social-Login-Komponente

Eine minimalistische Flat-Design-Social-Login-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
        <h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
        <div class="mt-4 flex justify-around w-full">
            <button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
        </div>
        <div class="mt-4 text-center">
            <span class="text-gray-500 dark:text-gray-400">or</span>
        </div>
        <input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            Log In
        </button>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
            Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
        </p>
    </div>
</div>

Komponente "Produktkarten"

Produktkartenkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

  <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

    <div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
    <div class="relative overflow-hidden">
      <img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>

    </div>
    <div class="p-6">
      <h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
      </div>
    </div>
  </div>

</div>

Sticky Navigation-Komponente

Sticky Navigation Component mit Skeuomorphism-Design, responsivem Design und Unterstützung für dunkle Themen. Verwendet Tailwind CSS.

Offen Vorschau

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">SkeuoNav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
    </ul>
  </div>

</nav>

Komponente "Warnmeldungen"

Eine Komponente für Warnmeldungen mit 3D-Design, responsiven Funktionen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Die Komponente enthält verschiedene Alarmtypen (Erfolg, Fehler, Warnung, Info) mit Symbolen und Meldungen.

Offen Vorschau

                <div class="flex flex-col space-y-4 p-6">  <!-- Success Alert -->  <div class="relative flex items-center justify-between bg-green-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-green-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>      </svg>      <span class="font-semibold">Success:</span>      <span>Your action was successful.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Error Alert -->  <div class="relative flex items-center justify-between bg-red-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-red-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>      </svg>      <span class="font-semibold">Error:</span>      <span>Something went wrong.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Warning Alert -->  <div class="relative flex items-center justify-between bg-yellow-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-yellow-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>      </svg>      <span class="font-semibold">Warning:</span>      <span>Proceed with caution.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div>  <!-- Info Alert -->  <div class="relative flex items-center justify-between bg-blue-500 text-white py-3 px-4 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 dark:bg-blue-700">    <div class="flex items-center space-x-2">      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>      </svg>      <span class="font-semibold">Info:</span>      <span>Here is some information.</span>    </div>    <button class="text-white hover:text-gray-200 focus:outline-none">      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>      </svg>    </button>  </div></div>

Neumorphe Mega-Menü-Komponente

Eine neumorphe Mega-Menükomponente mit reaktionsschnellem Verhalten und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <nav class="neumorphic-mega-menu bg-gray-200 dark:bg-gray-800 transition duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-xl font-bold text-gray-800 dark:text-white">My Logo</div>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      <div class="group relative">
        <button class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Products</button>
        <div class="absolute left-0 mt-2 w-64 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transform scale-95 group-hover:scale-100 transition duration-300 ease-in-out">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
        </div>
      </div>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
    </div>
    <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
    </button>
  </div>
  <div class="md:hidden mobile-menu hidden">
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Home</a>
    <div class="group relative">
      <button class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 w-full text-left">Products</button>
      <div class="pl-4">
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
      </div>
    </div>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">About</a>
    <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Contact</a>
  </div>
</nav>

<style>
.neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}

.dark .neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #444444, -5px -5px 10px #333333;
}
</style>

Komponente "Preisanzeige"

Preisanzeigekomponente im Neumorphism-Stil mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
    <div class="flex justify-between items-center">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200">Pro Plan</h3>
      <span class="text-xl font-bold text-gray-600 dark:text-gray-300">$29</span>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">billed monthly</p>
    <ul class="mt-4 space-y-2 text-gray-600 dark:text-gray-400">
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>Unlimited projects</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>10GB storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>Priority support</span>
      </li>
    </ul>
    <button class="mt-6 w-full py-3 bg-blue-500 text-white rounded-md font-bold shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">
      Choose Plan
    </button>
  </div>
</div>

<style>
.shadow-xl {
  box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff;
}
.dark .shadow-xl-dark {
  box-shadow: 10px 10px 20px #718096, -10px -10px 20px #4a5568;
}
</style>

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente mit einem neumorphen Design, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS. Es verfügt über einen Container mit subtilen Schatten und abgerundeten Ecken, einen Bildplatzhalter und Navigationspfeile, die mit dem Neumorphic-Effekt gestaltet sind.

Offen Vorschau

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="w-64 h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center">
      <!-- Placeholder for 360 image -->
      <img src="https://picsum.photos/600/400?random=1" alt="360 viewer placeholder" class="rounded-lg">
    </div>
    <div class="absolute inset-x-0 bottom-4 flex justify-between px-4">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #343434;
  }
</style>

1 ... 244 245 246 247 248 ... 282

Kategorien

Alle Komponenten