پیشنمایش زنده
کد HTML
<div
class="w-[300px] aspect-video rounded-lg shadow flex flex-col items-center justify-center gap-2 bg-slate-50 group"
>
<div
class="flex flex-col items-center p-8 rounded-md w-full sm:px-12 bg-gray-900 text-gray-100"
>
<div class="text-center">
<h2 class="text-xl font-semibold">Dubai</h2>
<p class="text-sm text-gray-400">March 13</p>
</div>
<svg
class="w-32 h-32 p-6 text-yellow-400 fill-current animate-[spin_5s_linear_infinite;]"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256,104c-83.813,0-152,68.187-152,152s68.187,152,152,152,152-68.187,152-152S339.813,104,256,104Zm0,272A120,120,0,1,1,376,256,120.136,120.136,0,0,1,256,376Z"
></path>
<rect
class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
y="16"
x="240"
height="48"
width="32"
></rect>
<rect
class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
y="448"
x="240"
height="48"
width="32"
></rect>
<rect
class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
y="240"
x="448"
height="32"
width="48"
></rect>
<rect
class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
y="240"
x="16"
height="32"
width="48"
></rect>
<rect
class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
transform="rotate(-45 416 416)"
y="393.373"
x="400"
height="45.255"
width="32"
></rect>
<rect
class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
transform="rotate(-45 96 96)"
y="73.373"
x="80"
height="45.255"
width="32.001"
></rect>
<rect
class="animate-[pulse_1s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
transform="rotate(-45.001 96.002 416.003)"
y="400"
x="73.373"
height="32"
width="45.255"
></rect>
<rect
class="animate-[pulse_2s_cubic-bezier(0.4,_0,_0.6,_1)_infinite;]"
transform="rotate(-45 416 96)"
y="80"
x="393.373"
height="32.001"
width="45.255"
></rect>
</svg>
<div class="mb-2 text-3xl font-semibold">
27° <span class="mx-1 font-normal">/</span>19°
</div>
<p class="text-gray-400">Sunny</p>
</div>
</div>
کد CSS
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.flex {
display: flex;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.h-32 {
height: 8rem;
}
.w-32 {
width: 8rem;
}
.w-\[300px\] {
width: 300px;
}
.w-full {
width: 100%;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.animate-\[pulse_1s_cubic-bezier\(0\.4\2c _0\2c _0\.6\2c _1\)_infinite\;\] {
animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.animate-\[pulse_2s_cubic-bezier\(0\.4\2c _0\2c _0\.6\2c _1\)_infinite\;\] {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-\[spin_5s_linear_infinite\;\] {
animation: spin 5s linear infinite;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-slate-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}
.fill-current {
fill: currentColor;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.text-center {
text-align: center;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 640px) {
.sm\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
}