Composant Suivre le bouton - Monospace/Style de développeur
Un composant de bouton de suivi complexe et interactif conçu pour les sites Web d’actualités/journalisme, avec une esthétique monospace/développeur avec des couleurs aux tons de bijou et une réactivité totale, y compris la prise en charge du mode sombre.
HTML Code
<div class="font-mono antialiased p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
<div class="max-w-md mx-auto bg-white dark:bg-zinc-900 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800">
<div class="flex items-center p-4 sm:p-6 border-b border-gray-200 dark:border-zinc-800">
<div class="flex-shrink-0">
<img class="h-16 w-16 sm:h-20 sm:w-20 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-600 ring-2 ring-emerald-300 dark:ring-emerald-800" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Developer Profile Picture">
</div>
<div class="ml-4 flex-grow">
<h2 class="text-xl sm:text-2xl font-bold dark:text-emerald-400">@DevJournalist_AI</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 hidden sm:block">Code Editor & Story Teller</p>
<div class="flex items-center space-x-2 mt-2">
<span class="px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 text-xs font-semibold rounded-full">Verified</span>
<span class="px-2 py-1 bg-violet-100 dark:bg-violet-900 text-violet-700 dark:text-violet-300 text-xs font-semibold rounded-full">News</span>
</div>
</div>
<div class="flex flex-col items-end">
<button class="follow-button px-5 py-2 sm:px-6 sm:py-2.5 rounded-full text-white font-semibold transition-all duration-300 flex items-center justify-center
bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600
focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800
data-[followed='true']:bg-gray-300 data-[followed='true']:hover:bg-gray-400 data-[followed='true']:dark:bg-zinc-700 data-[followed='true']:dark:hover:bg-zinc-600
data-[followed='true']:text-gray-800 data-[followed='true']:dark:text-gray-200
data-[followed='true']:focus:ring-gray-200 data-[followed='true']:dark:focus:ring-zinc-600"
onclick="this.dataset.followed = (this.dataset.followed === 'true' ? 'false' : 'true');
this.innerHTML = (this.dataset.followed === 'true' ? '✓ Followed' : '+ Follow');"
data-followed="false">
+ Follow
</button>
<span class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-right" id="follower-count">12.5k Followers</span>
</div>
</div>
<div class="p-4 sm:p-6 text-sm text-gray-700 dark:text-gray-300">
<p class="mb-2"><span class="text-emerald-500 dark:text-emerald-400">// Latest Commit:</span> Unpacking the future of AI in journalism. Stay updated on cutting-edge tech and ethical reporting.</p>
<p class="mb-2"><span class="text-violet-500 dark:text-violet-400">// Repository Status:</span> Constantly fetching new insights from the global newsfeed. Expect bug fixes and feature updates on your understanding of complex issues.</p>
<p class="text-ruby-500 dark:text-ruby-400"><span class="text-red-500 dark:text-red-400">// System Log:</span> Ping us for collabs or data-driven story discussions. Our DMs are open for secure connections.</p>
</div>
<div class="p-4 sm:p-6 border-t border-gray-200 dark:border-zinc-800 flex flex-wrap gap-2 text-xs">
<span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#TechJournalism</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#DataScience</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#AIethics</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#FutureOfNews</span>
</div>
</div>
</div>Composants associés
Composant Suivre le bouton
Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.
Composant Suivre le bouton
Un composant de bouton de suivi/désabonnement réactif adapté aux sites Web d’événements et de conférences, avec des transitions de dégradé, la prise en charge du mode sombre et une couleur d’accentuation vive. Il comprend un effet de survol subtil et modifie le texte et l’arrière-plan au clic (simulé).
Bouton de suivi 3D-Vibrant
Un composant de bouton de suivi simple, inspiré de la 3D, avec des couleurs vives pour les sites Web d’entreprise. Il est réactif et inclut la prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.