This post is saved as a draft.
#e8e8e8
HTML +TailwindCSS
1<div 2 class="duration-300 font-mono text-white group cursor-pointer relative overflow-hidden bg-[#DCDFE4] w-28 h-48 dark:bg-[#22272B] rounded-3xl p-4 hover:w-56 hover:bg-blue-200 hover:dark:bg-[#0C66E4]" 3> 4 <h3 class="text-xl text-center">Today</h3> 5 <div class="gap-4 relative"> 6 <svg 7 viewBox="0 0 64 64" 8 xmlns:xlink="http://www.w3.org/1999/xlink" 9 xmlns="http://www.w3.org/2000/svg" 10 class="w-20 scale-[110%]" 11 > 12 <defs> 13 <linearGradient 14 gradientUnits="userSpaceOnUse" 15 y2="28.33" 16 y1="19.67" 17 x2="21.5" 18 x1="16.5" 19 id="b" 20 > 21 <stop stop-color="#fbbf24" offset="0"></stop> 22 <stop stop-color="#fbbf24" offset=".45"></stop> 23 <stop stop-color="#f59e0b" offset="1"></stop> 24 </linearGradient> 25 <linearGradient 26 gradientUnits="userSpaceOnUse" 27 y2="50.8" 28 y1="21.96" 29 x2="39.2" 30 x1="22.56" 31 id="c" 32 > 33 <stop stop-color="#f3f7fe" offset="0"></stop> 34 <stop stop-color="#f3f7fe" offset=".45"></stop> 35 <stop stop-color="#deeafb" offset="1"></stop> 36 </linearGradient> 37 <linearGradient 38 gradientUnits="userSpaceOnUse" 39 y2="48.05" 40 y1="42.95" 41 x2="25.47" 42 x1="22.53" 43 id="a" 44 > 45 <stop stop-color="#4286ee" offset="0"></stop> 46 <stop stop-color="#4286ee" offset=".45"></stop> 47 <stop stop-color="#0950bc" offset="1"></stop> 48 </linearGradient> 49 <linearGradient 50 xlink:href="#a" 51 y2="48.05" 52 y1="42.95" 53 x2="32.47" 54 x1="29.53" 55 id="d" 56 ></linearGradient> 57 <linearGradient 58 xlink:href="#a" 59 y2="48.05" 60 y1="42.95" 61 x2="39.47" 62 x1="36.53" 63 id="e" 64 ></linearGradient> 65 </defs> 66 <circle 67 stroke-width=".5" 68 stroke-miterlimit="10" 69 stroke="#f8af18" 70 fill="url(#b)" 71 r="5" 72 cy="24" 73 cx="19" 74 ></circle> 75 <path 76 d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17" 77 stroke-width="2" 78 stroke-miterlimit="10" 79 stroke-linecap="round" 80 stroke="#fbbf24" 81 fill="none" 82 > 83 <animateTransform 84 values="0 19 24; 360 19 24" 85 type="rotate" 86 repeatCount="indefinite" 87 dur="45s" 88 attributeName="transform" 89 ></animateTransform> 90 </path> 91 <path 92 d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" 93 stroke-width=".5" 94 stroke-miterlimit="10" 95 stroke="#e6effc" 96 fill="url(#c)" 97 ></path> 98 <path 99 d="M24.39 43.03l-.78 4.94" 100 stroke-width="2" 101 stroke-miterlimit="10" 102 stroke-linecap="round" 103 stroke="url(#a)" 104 fill="none" 105 > 106 <animateTransform 107 values="1 -5; -2 10" 108 type="translate" 109 repeatCount="indefinite" 110 dur="0.7s" 111 attributeName="transform" 112 ></animateTransform> 113 </path> 114 <path 115 d="M31.39 43.03l-.78 4.94" 116 stroke-width="2" 117 stroke-miterlimit="10" 118 stroke-linecap="round" 119 stroke="url(#d)" 120 fill="none" 121 > 122 <animateTransform 123 values="1 -5; -2 10" 124 type="translate" 125 repeatCount="indefinite" 126 dur="0.7s" 127 begin="-0.4s" 128 attributeName="transform" 129 ></animateTransform> 130 </path> 131 <path 132 d="M38.39 43.03l-.78 4.94" 133 stroke-width="2" 134 stroke-miterlimit="10" 135 stroke-linecap="round" 136 stroke="url(#e)" 137 fill="none" 138 > 139 <animateTransform 140 values="1 -5; -2 10" 141 type="translate" 142 repeatCount="indefinite" 143 dur="0.7s" 144 begin="-0.2s" 145 attributeName="translate-x-8" 146 ></animateTransform> 147 </path> 148 </svg> 149 <h4 150 class="font-sans duration-300 absolute left-1/2 -translate-x-1/2 text-5xl text-center group-hover:translate-x-8 group-hover:-translate-y-16 group-hover:scale-150" 151 > 152 6° 153 </h4> 154 </div> 155 <div class="absolute duration-300 -left-32 mt-2 group-hover:left-10"> 156 <p class="text-sm">Heavy Raining</p> 157 <p class="text-sm">50% humidity</p> 158 </div> 159</div> 160
Variation of acard
Variation of acard