Brutalism_Music_Audio_Form
Une forme complexe, de style brutaliste, pour les plates-formes musicales/audio avec une palette de couleurs bonbon/doux, avec plusieurs types d’entrée, la prise en charge du mode sombre et une réactivité totale.
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>Composants associés
Gaming_Material_Form
Une forme réactive sur le thème du jeu inspirée des principes de conception matérielle, avec des couleurs triadiques, des effets de profondeur et la prise en charge du mode sombre. Convient pour la connexion, l’inscription ou les paramètres de jeu.
Composant Formulaires
Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode sombre.
Composante des formes brutalistes
Un simple composant de formes de style brutaliste pour les médias sociaux. Il présente un design brut à contraste élevé utilisant des couleurs en niveaux de gris et est réactif avec la prise en charge du mode sombre.