Бруталистская форма в социальных сетях
Простой, брутальный компонент формы для социальных сетей с триадической цветовой гаммой и поддержкой темных тем.
HTML-код
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism p-6 max-w-md w-full"><h2 class="text-2xl md:text-3xl font-bold mb-6 text-black dark:text-white uppercase tracking-wider">Share Your Thoughts</h2><form><div class="mb-4"><label for="post-content" class="block text-black dark:text-white text-sm font-bold mb-2">What's on your mind?</label><textarea id="post-content" rows="4" class="block w-full px-3 py-2 text-black dark:text-white bg-yellow-300 dark:bg-yellow-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></textarea></div><div class="mb-4"><label for="tags" class="block text-black dark:text-white text-sm font-bold mb-2">Tags (comma-separated):</label><input type="text" id="tags" class="block w-full px-3 py-2 text-black dark:text-white bg-purple-400 dark:bg-purple-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></div><button type="submit" class="w-full bg-red-500 dark:bg-red-600 text-white dark:text-black font-bold py-3 px-4 border-2 border-black dark:border-white active:bg-red-700 dark:active:bg-red-800 uppercase tracking-wider">Post</button></form></div></div>
Связанные компоненты
Компонент «Формы»
Сложный, адаптивный компонент формы с поддержкой темной темы для блогов/контентных веб-сайтов, выполненный в минималистском/плоском стиле с использованием аналогичной цветовой схемы.
Компонент минималистичных форм
Минималистичный компонент формы, адаптированный для портфолио, с пастельной цветовой гаммой, простым макетом, адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент «Формы»
Сложный, отзывчивый компонент форм с поддержкой темной темы для интерфейсов социальных сетей с монохроматическим 3D-дизайном. Использует Tailwind CSS с префиксами dark: для темного режима и включает примеры элементов формы.