卡片 · Brave Fireant

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<!-- From Uiverse.io by Javierrocadev  - Tags: icon, blue, gradient, card, hover, hover effect, card hover, tailwind -->
<div
  class="group hover:-rotate-0 [transform:rotate3d(1_,-1,_1,_15deg)] duration-500 overflow-hidden bg-gradient-to-bl from-sky-400 via-sky-500 to-sky-700 p-6 rounded-lg hover:shadow-lg [box-shadow:12px_12px_0px_0px_#0d0d0d] backdrop-filter backdrop-blur-md border border-neutral-600"
>
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-2xl font-bold text-white">City Name</h2>
      <p class="text-neutral-800">Sunny</p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="48px"
      height="48px"
      viewBox="0 0 24 24"
      fill="none"
      class="absolute -top-2 -right-2 w-12 h-12 stroke-yellow-300"
    >
      <path
        d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
        stroke=""
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>
  </div>
  <div class="mt-4">
    <p class="text-4xl font-bold text-white">22°C</p>
    <div class="flex items-center justify-between gap-1">
      <span class="mr-2 text-neutral-800">Feels Like</span>
      <span class="text-white">20°C</span>
    </div>
    <div class="flex items-center justify-between gap-1">
      <span class="text-neutral-800">Wind</span>
      <span class="text-white">10 km/h</span>
    </div>
    <div class="flex items-center justify-between gap-1">
      <span class="text-neutral-800">Humidity</span>
      <span class="text-white">75%</span>
    </div>
  </div>
</div>


    

[/hidecontent]