Alle Komponenten

Social-Share-Buttons Komponente 51

Eine reaktionsschnelle Social-Share-Buttons-Komponente, die nach skeuomorphen Designprinzipien entwickelt wurde, mit Schaltflächen, die reale Objekte nachahmen, und Unterstützung für dunkle Themen. Die Komponente wird mit Tailwind CSS formatiert und enthält Platzhalterbilder aus picsum.photos und Avatare aus randomuser.me.

Vorschau öffnen

                <div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

Chat-Fenster-Komponente 50

Eine minimalistische Chat-Fensterkomponente mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es enthält Platzhalterbilder und Avatarbilder aus zufälligen Platzhalterquellen.

Vorschau öffnen

                <div class="bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Chat with Us</h1>
        <button class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-150">
            <svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/>
            </svg>
        </button>
    </div>
    <div class="p-4 overflow-y-auto h-64">
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/300" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>I have a question about my order.</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/301" alt="User Avatar" />
        </div>
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/302" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>I can help you with that!</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>When will it be delivered?</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/303" alt="User Avatar" />
        </div>
    </div>
    <div class="flex p-4 border-t border-gray-200 dark:border-gray-700">
        <input type="text" class="flex-grow border border-gray-300 dark:border-gray-600 p-2 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 focus:border-transparent" placeholder="Type your message..." />
        <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 transition duration-150 hover:bg-blue-600">
            Send
        </button>
    </div>
</div>

Spalten Komponente 49

Eine responsive Columns-Komponente mit skeuomorphem Design, das reale Elemente nachahmt, mit Unterstützung für dunkle Themen und mit Tailwind CSS.

Vorschau öffnen

                <div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=1" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column One</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the first column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=2" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Two</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the second column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=3" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Three</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the third column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>
    </div>
</div>

Abzeichen Komponente 48

Eine Badges-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und responsive Layouts und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Vorschau öffnen

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
        </div>
    </div>
</div>

Komponente der Navigationsleiste 47

Eine reaktionsschnelle Navigationsleiste mit einem 3D-Designstil, der Tiefe und Engagement beinhaltet und dunkles Design unterstützt.

Vorschau öffnen

                <nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

In den Warenkorb Button Komponente 46

Eine Retro-/Vintage-Schaltflächenkomponente "In den Warenkorb", die mit Tailwind CSS entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-md mb-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Retro Product Name</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a brief description of the retro product.</p>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <button class="px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Add to Cart</button>
    </div>
</div>

Fehlermeldungen Komponente 45

Eine Fehlermeldungskomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Vorschau öffnen

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
    <div class="flex items-center space-x-3">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
        </div>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
        <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
    </div>
    <div class="mt-4">
        <img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
    </div>
</div>

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente, die mit Mikrointeraktionen entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau öffnen

                <div class="relative w-full h-96 overflow-hidden bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300" alt="360 View" class="transition-transform duration-300 transform hover:scale-110" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300?blur" alt="360 View" class="transition-opacity duration-300 opacity-0 hover:opacity-100" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition duration-300">
            Rotate
        </button>
    </div>
</div>
<div class="mt-4 text-center">
    <h2 class="text-xl font-semibold dark:text-white">Explore Our 360° View</h2>
    <p class="text-gray-600 dark:text-gray-400">Hover over the image to see the effect!</p>
</div>

Navigationskomponente 43

Eine reaktionsschnelle Navigationskomponente, die skeuomorphen Designprinzipien folgt, mit digitalen Elementen, die ihre realen Gegenstücke nachahmen, mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <nav class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg p-4">
    <div class="flex justify-between items-center">
        <a href="#" class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-lg font-bold text-gray-800 dark:text-gray-200">MyApp</span>
        </a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            </button>
        </div>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Services</a>
        <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition duration-300">Contact</a>
    </div>
</nav>

Heatmaps-Komponente 42

Eine reaktionsschnelle Heatmap-Komponente, die im Neumorphism-Stil unter Verwendung von Tailwind CSS entworfen wurde, den Dunkelmodus unterstützt und zufällige Bilder und Avatare enthält.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 px-4">
  <h2 class="text-2xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Heat Map Component</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-4xl">
    <!-- Sample Heat Map Item -->
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=1" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 1</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: High</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=2" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 2</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Medium</p>
    </div>
    <div class="flex flex-col items-center justify-center p-4 rounded-lg shadow-lg bg-white dark:bg-gray-700 transition-all duration-300 ease-in-out hover:shadow-xl">
      <img class="w-24 h-24 rounded-full mb-2" src="https://picsum.photos/200/200?random=3" alt="Random Image" />
      <p class="text-lg font-medium text-gray-800 dark:text-gray-300">Heat Point 3</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Activity Level: Low</p>
    </div>
    <!-- More heat map items can be added here -->
  </div>
</div>

Kategorien