Компонент кнопки "Следовать" - моноширинный/стиль разработчика
Сложный, интерактивный компонент кнопки подписки, разработанный для новостных/журналистских веб-сайтов, отличается моноширинной/девелоперской эстетикой с цветами драгоценных тонов и полной отзывчивостью, включая поддержку темного режима.
HTML-код
<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>
Связанные компоненты
3D-Яркая-Кнопка-Следования
Простой компонент кнопки «Подписаться», вдохновленный 3D, с яркими цветами для бизнес-сайтов. Он адаптивный и включает поддержку темных тем, использующих только HTML и Tailwind CSS.
Компонент кнопки «Следовать»
Адаптивный компонент кнопки «Подписаться/отписаться», подходящий для веб-сайтов мероприятий и конференций, с градиентными переходами, поддержкой темного режима и ярким акцентным цветом. Он включает в себя тонкий эффект наведения и меняет текст и фон по клику (симулируется).
БруталистПодписатьсяКнопка
Бруталистская кнопка подписки с поддержкой отзывчивого и темного режима.