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
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.
Composant Suivre le bouton
Un composant de bouton de suivi conçu dans le style brutalisme avec un contraste élevé et une apparence brute et audacieuse. Il est réactif et prend en charge les thèmes sombres.
Composant Suivre le bouton
Il s’agit d’un composant de bouton de suivi complexe, inspiré du papier/de l’impression, pour les sites Web de jeux, doté d’un design monochrome en noir et blanc avec une couleur d’accent vive, optimisé pour la réactivité et le mode sombre.