Alle Komponenten

Alle verfügbaren Tailwind CSS-Komponenten durchsuchen

Login/Signup-Komponente

Eine minimalistische Login- und Signup-Komponente mit Tailwind CSS, die responsive Effekte und dunkles Theme unterstützt.

Offen Vorschau

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Login</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
    </form>
  </div>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
    </form>
  </div>
  <div class="hidden">
    <img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
    <img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
  </div>
</div>

Komponente "Inhaltsverzeichnis"

Eine minimalistische und reaktionsschnelle Inhaltsverzeichnis-Komponente, die mit Tailwind CSS gestaltet ist, den Dunkelmodus unterstützt und klare Designelemente aufweist.

Offen Vorschau

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
        <li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
        <li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
        <li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
        <li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
        <li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
    </ul>
</div>

<div class="hidden md:flex items-center justify-center mt-8">
    <img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
    <span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #e2e8f0;
        }
    }
</style>

Komponente "Medienkomponenten"

Eine Medienkomponente, die im Skeuomorphismus-Stil unter Verwendung von Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

Tag-Cloud-Komponente

Eine Tag-Cloud-Komponente, die mit einem skeuomorphen Stil, responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS entwickelt wurde.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
    <h2 class="text-xl font-semibold mb-4">Tag Cloud</h2>
    <div class="flex flex-wrap gap-2">
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Web Development</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Design</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">SEO</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Marketing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Programming</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Networking</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Cloud Computing</a>
        <a href="#" class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full px-4 py-2 shadow-md transition-transform transform hover:scale-105">Data Science</a>
    </div>
</div>

Eine reaktionsschnelle Follow-Button-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und Unterstützung für den Dunkelmodus und maßgeschneiderte Stile mit Tailwind CSS bietet.

Offen Vorschau

                <div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>

Community-Forum-Komponente

Eine Community-Forum-Komponente im Neumorphismus-Stil mit Avataren, Threads und einem dunklen Thema.

Offen Vorschau

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
    <div class="flex flex-col space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
                <span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
            <div class="flex justify-between items-center mt-4">
                <button class="text-blue-500 hover:underline">Reply</button>
                <span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
            </div>
        </div>
    </div>
</div>

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente, die mit Skeuomorphismus entwickelt wurde und digitale Elemente enthält, die reale Gegenstücke nachahmen. Es wird mit Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen gestaltet.

Offen Vorschau

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div class="space-x-4 hidden md:flex">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:flex md:items-center mt-4 space-x-4 hidden">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
        <span class="text-gray-800 dark:text-white">User Name</span>
    </div>
</nav>

<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: white;
        }
    }
</style>

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente mit einer Brutalismus-Ästhetik mit auffälligen Designs, hohem Kontrast und ungewöhnlichen Layouts. Es enthält responsive Effekte und unterstützt dunkle Designs mit CSS.

Offen Vorschau

                <nav class="bg-white dark:bg-gray-800 p-6">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
      <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
    </div>
    <ul class="flex space-x-6">
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#home">Home</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#about">About</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#services">Services</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
  <div class="bg-gray-300 dark:bg-gray-700 my-6">
    <img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
  </div>
  <div class="container mx-auto py-6">
    <h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg"> 
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
      </div>
    </div>
  </div>
  <footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
    <p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
  </footer>
</nav>

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit einem 3D-Designstil, Unterstützung für dunkle Designs und Platzhalterbildern. Die Komponente verfügt über Schaltflächen für Google, Facebook, Twitter und LinkedIn mit Hover-Effekten für Tiefe und Engagement.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

Komponente "Gefällt mir/Reaktions-Buttons"

Eine Like/Reaction Buttons-Komponente im Glassmorphism-Stil mit responsiven Effekten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen Vorschau

                <div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-2">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-900 dark:text-white">Like</span>
    </div>
    <button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
        <span class="material-icons"> thumb_up </span>
    </button>
    <button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
        <span class="material-icons"> favorite </span>
    </button>
    <button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
        <span class="material-icons"> sentiment_satisfied </span>
    </button>
</div>

<style>
    /* Add Material Icons font link */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

1 ... 231 232 233 234 235 ... 242

Kategorien

Alle Komponenten