Card by Javierrocadev
#b1b9b9
HTML +TailwindCSS
1<div 2 class="grid grid-flow-row grid-cols-3 grid-rows-2 p-4 gap-2 rounded-lg bg-gradient-to-br from-sky-800 via-sky-700 to-sky-400 [box-shadow:3px_4px_0px_2px]" 3> 4 <button 5 class="col-span-3 col-start-2 relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]" 6 > 7 <span class="rotate-90 font-bold text-xs"> 8 <svg 9 xmlns="http://www.w3.org/2000/svg" 10 width="800px" 11 height="800px" 12 viewBox="0 0 24 24" 13 class="fill-neutral-50 w-12 h-12" 14 > 15 <path 16 d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z" 17 ></path> 18 </svg> 19 </span> 20 </button> 21 22 <button 23 class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]" 24 > 25 <span class="font-bold text-xs"> 26 <svg 27 xmlns="http://www.w3.org/2000/svg" 28 width="800px" 29 height="800px" 30 viewBox="0 0 24 24" 31 class="fill-neutral-50 w-12 h-12" 32 > 33 <path 34 d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z" 35 ></path> 36 </svg> 37 </span> 38 </button> 39 <button 40 class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]" 41 > 42 <span class="-rotate-90 font-bold text-xs"> 43 <svg 44 xmlns="http://www.w3.org/2000/svg" 45 width="800px" 46 height="800px" 47 viewBox="0 0 24 24" 48 class="fill-neutral-50 w-12 h-12" 49 > 50 <path 51 d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z" 52 ></path> 53 </svg> 54 </span> 55 </button> 56 <button 57 class="relative w-10 h-10 flex justify-center items-center duration-300 hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-800 rounded [box-shadow:2px_2px_0px_2px] hover:[box-shadow:1px_1px_0px_1px]" 58 > 59 <span class="rotate-180 font-bold text-xs"> 60 <svg 61 xmlns="http://www.w3.org/2000/svg" 62 width="800px" 63 height="800px" 64 viewBox="0 0 24 24" 65 class="fill-neutral-50 w-12 h-12" 66 > 67 <path 68 d="M18.0003 12.0001V14.6701C18.0003 17.9801 15.6503 19.3401 12.7803 17.6801L10.4703 16.3401L8.16031 15.0001C5.29031 13.3401 5.29031 10.6301 8.16031 8.97005L10.4703 7.63005L12.7803 6.29005C15.6503 4.66005 18.0003 6.01005 18.0003 9.33005V12.0001Z" 69 ></path> 70 </svg> 71 </span> 72 </button> 73</div> 74
335 views
Variation of acard
MIT License