Tous les composants

Composant Flux d’activités

Un composant de flux d’activité réactif conçu dans un style 3D avec prise en charge du thème sombre, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

Composant de pied de page

Un composant de pied de page de style Brutalism avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center">  <div class="flex flex-wrap justify-center">    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Contact Us</h4>      <p class="text-lg">Email: [email protected]</p>      <p class="text-lg">Phone: (123) 456-7890</p>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Follow Us</h4>      <div class="flex space-x-4">        <a href="#" class="text-lg hover:text-gray-400">Facebook</a>        <a href="#" class="text-lg hover:text-gray-400">Twitter</a>        <a href="#" class="text-lg hover:text-gray-400">Instagram</a>      </div>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">About Us</h4>      <p class="text-lg">We are a company that values...</p>    </div>  </div>  <div class="flex flex-wrap justify-center mt-10">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3">  </div>  <div class="mt-10 text-center">    <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p>  </div>  <style>    @media (prefers-color-scheme: dark) {      .bg-gray-800 { background-color: #1a1a1a; }      .text-white { color: #f0f0f0; }      .hover\:text-gray-400:hover { color: #a0a0a0; }    }  </style> </footer>

Volet Forum communautaire

Un composant de forum communautaire réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement.

Ouvrir l’aperçu

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Composant Notifications

Un composant de notifications réactives conçu en mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

Composant Tableaux de bord

Un composant de tableau de bord minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
        </div>
        <div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Jane Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Mike Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Composant Galerie

Un composant de galerie de style rétro vintage avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

Un composant de rétroaction réactif qui intègre des micro-interactions avec des animations attrayantes. Il est conçu pour prendre en charge le mode sombre et comporte des éléments pour les commentaires de l’utilisateur avec des images et des avatars de remplacement.

Ouvrir l’aperçu

                <div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

Composant d’intégration de média

Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

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

Composants fonctionnels

Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.

Ouvrir l’aperçu

                <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 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 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 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

Composants d’authentification

Un composant d’authentification réactif conçu dans l’interface utilisateur du mode sombre, avec des formulaires de connexion et d’inscription avec des images de remplacement.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Catégories

Composant Flux d’activités

Composant de pied de page

Volet Forum communautaire

Composant Notifications

Composant Tableaux de bord

Composant Galerie

Composante de rétroaction

Composant d’intégration de média

Composants fonctionnels

Composants d’authentification