Brutalism_Music_Audio_Form
A complex, brutalist-style form for music/audio platforms with a candy/sweet color scheme, featuring multiple input types, dark mode support, and full responsiveness.
HTML Code
<div class="min-h-screen bg-[#FFF0F5] dark:bg-[#1A001A] p-4 sm:p-8 font-sans transition-colors duration-300">
<div class="max-w-4xl mx-auto border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#0FFF00] bg-[#FFC0CB] dark:bg-[#4B0082] p-6 sm:p-10 relative overflow-hidden">
<div class="absolute top-0 left-0 w-24 h-24 bg-[#00FFFF] dark:bg-[#FFD700] transform -translate-x-12 -translate-y-12 rotate-45 border-4 border-black dark:border-white"></div>
<div class="absolute bottom-0 right-0 w-32 h-32 bg-[#FF1493] dark:bg-[#00BFFF] transform translate-x-16 translate-y-16 -rotate-30 border-4 border-black dark:border-white"></div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-black dark:text-white mb-4 sm:mb-6 leading-tight select-none uppercase tracking-wide border-b-4 border-black dark:border-white pb-2">
<span class="block transform -rotate-2 inline-block bg-[#00FFFF] dark:bg-[#FFD700] px-3 py-1 mr-2">AUDIO</span> UPLOAD
</h1>
<p class="text-lg sm:text-xl text-black dark:text-white mb-8 select-none font-bold italic ">
Unleash your sound, now on our platform. Brutally simple. Sweetly effective.
</p>
<form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
<div class="mb-4 col-span-full md:col-span-1">
<label for="song-title" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Song / Track Title
</label>
<input type="text" id="song-title" name="song-title" placeholder="e.g., 'Synthwave Dreamscape'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
</div>
<div class="mb-4 col-span-full md:col-span-1">
<label for="artist-name" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Artist / Band Name
</label>
<input type="text" id="artist-name" name="artist-name" placeholder="e.g., 'Neon Echoes'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
</div>
<div class="mb-4 col-span-full">
<label for="genre" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Genre
</label>
<select id="genre" name="genre" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 text-lg sm:text-xl font-mono appearance-none pr-8 bg-no-repeat bg-[length:24px_24px] bg-[right_1rem_center] bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')]" style="background-image:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');">
<option value="">Select a genre...</option>
<option value="electronic">Electronic</option>
<option value="rock">Rock</option>
<option value="hip-hop">Hip-Hop</option>
<option value="pop">Pop</option>
<option value="classical">Classical</option>
<option value="jazz">Jazz</option>
<option value="ambient">Ambient</option>
<option value="synthwave">Synthwave</option>
<option value="vaporwave">Vaporwave</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-4 col-span-full">
<label for="description" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Track Description\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(Max 500 chars)</span>
</label>
<textarea id="description" name="description" rows="5" maxlength="500" placeholder="Tell us about your track: its mood, inspiration, or how it was made..." class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono resize-y"></textarea>
</div>
<div class="mb-4 col-span-full">
<label for="album-art" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Album Art\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(PNG, JPG, max 5MB)</span>
</label>
<div class="flex flex-col sm:flex-row items-center gap-4">
<input type="file" id="album-art" name="album-art" accept="image/png, image/jpeg" class="hidden" onchange="document.getElementById('album-art-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
<label for="album-art" class="inline-block px-6 py-3 sm:py-4 bg-[#FFD700] dark:bg-[#50C878] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] hover:shadow-[6px_6px_0_0_#FF1493] dark:hover:shadow-[6px_6px_0_0_#00BFFF] hover:bg-[#FFC0CB] dark:hover:bg-[#4B0082] transition-all duration-200 select-none">
Choose File
</label>
<span id="album-art-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
</div>
</div>
<div class="mb-4 col-span-full">
<label for="audio-file" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
Audio File\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(MP3, WAV, max 50MB)</span>
</label>
<div class="flex flex-col sm:flex-row items-center gap-4">
<input type="file" id="audio-file" name="audio-file" accept="audio/mpeg, audio/wav" class="hidden" onchange="document.getElementById('audio-file-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
<label for="audio-file" class="inline-block px-6 py-3 sm:py-4 bg-[#00FFFF] dark:bg-[#FFD700] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#9D00FC] dark:shadow-[4px_4px_0_0_#0FFF00] hover:shadow-[6px_6px_0_0_#9D00FC] dark:hover:shadow-[6px_6px_0_0_#0FFF00] hover:bg-[#A3EAAA] dark:hover:bg-[#2F4F4F] transition-all duration-200 select-none">
Upload Audio
</label>
<span id="audio-file-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
</div>
</div>
<div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
<input type="checkbox" id="explicit" name="explicit" class="hidden peer">
<label for="explicit" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#A3EAAA] dark:bg-[#2F4F4F] shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] cursor-pointer peer-checked:bg-[#FF1493] dark:peer-checked:bg-[#00BFFF] transition-all duration-200 overflow-hidden">
<span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
</label>
<label for="explicit" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
Contains Explicit Content
</label>
</div>
<div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
<input type="checkbox" id="terms" name="terms" class="hidden peer">
<label for="terms" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#FFD700] dark:bg-[#50C878] shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] cursor-pointer peer-checked:bg-[#9D00FC] dark:peer-checked:bg-[#0FFF00] transition-all duration-200 overflow-hidden">
<span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
</label>
<label for="terms" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
I agree to the <a href="#" class="underline font-extrabold text-[#FF1493] dark:text-[#00BFFF] hover:text-[#9D00FC] dark:hover:text-[#0FFF00] transition-colors duration-200">Terms of Service</a>
</label>
</div>
<div class="col-span-full mt-4 sm:mt-6">
<button type="submit" class="w-full px-8 py-4 bg-[#FF69B4] dark:bg-[#00FFFF] text-black dark:text-white text-2xl sm:text-3xl font-extrabold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#FFD700] hover:shadow-[12px_12px_0_0_#9D00FC] dark:hover:shadow-[12px_12px_0_0_#FFD700] hover:bg-[#FF1493] dark:hover:bg-[#00BFFF] transition-all duration-200 cursor-pointer active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_0_black] dark:active:shadow-[4px_4px_0_0_white] select-none">
SUBMIT MY SOUND
</button>
</div>
</form>
</div>
</div>Related Components
Forms Component
Forms Component with Glassmorphism style, Vibrant color scheme, and Simple complexity for Portfolio. Responsive design with dark theme support using Tailwind CSS. No JavaScript.
Brutalist Forms Component
A web forms component designed with a brutalist style featuring high contrast and unusual layouts, suitable for e-commerce, and responsive with dark theme support.
Brutalist Forms Component
A simple brutalist-styled forms component for social media. It features a high contrast, raw design using grayscale colors and is responsive with dark mode support.