#e8e8e8
HTML +TailwindCSS
1<div 2 class="relative group rounded-lg w-64 bg-gray-50 overflow-hidden before:absolute before:w-12 before:h-12 before:content[''] before:right-0 before:bg-violet-500 before:rounded-full before:blur-lg before:[box-shadow:-60px_20px_10px_10px_#F9B0B9]" 3> 4 <svg 5 y="0" 6 xmlns="http://www.w3.org/2000/svg" 7 x="0" 8 width="100" 9 viewBox="0 0 100 100" 10 preserveAspectRatio="xMidYMid meet" 11 height="100" 12 class="w-8 h-8 absolute right-0 -rotate-45 stroke-pink-300 top-1.5 group-hover:rotate-0 duration-300" 13 > 14 <path 15 stroke-width="4" 16 stroke-linejoin="round" 17 stroke-linecap="round" 18 fill="none" 19 d="M60.7,53.6,50,64.3m0,0L39.3,53.6M50,64.3V35.7m0,46.4A32.1,32.1,0,1,1,82.1,50,32.1,32.1,0,0,1,50,82.1Z" 20 class="svg-stroke-primary" 21 ></path> 22 </svg> 23 <select 24 class="appearance-none hover:placeholder-shown:bg-emerald-500 relative text-pink-400 bg-transparent ring-0 outline-none border border-neutral-500 text-neutral-900 placeholder-violet-700 text-sm font-bold rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-full p-2.5" 25 > 26 <option>HTML</option> 27 <option>React</option> 28 <option>Vue</option> 29 <option>Angular</option> 30 <option>Svelte</option> 31 </select> 32</div> 33
2.1K views
2.1K views
Comments
Variations
1 MIT License