cardstatisticdashboardanimatedtailwindgradientmetricdark

Animated Neon Statistic Card

Карточка статистики с неоновой анимацией. Отображает метрику с градиентным текстом и фоном. Идеальна для дашбордов.

Prompt

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Stats Card</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <meta name="disabled-font-classes"
    content="font-geist,font-roboto,font-montserrat,font-poppins,font-playfair,font-instrument-serif,font-merriweather,font-bricolage,font-jakarta,font-manrope,font-space-grotesk,font-work-sans,font-pt-serif,font-geist-mono,font-space-mono,font-quicksand,font-nunito">





</head>

<body class="min-h-screen flex items-center justify-center font-geist bg-gray-900">
  <div class="outer w-[300px] h-[250px] rounded-[10px] p-[1px] relative"
    style="background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);">
    <div class="dot w-[5px] aspect-square absolute bg-white rounded-full z-[2]"
      style="box-shadow: 0 0 10px #ffffff; right: 10%; top: 10%; animation: moveDot 6s linear infinite;"></div>
    <div
      class="card z-[1] flex relative flex-col text-white w-full h-full border-[#202222] border rounded-[9px] items-center justify-center"
      style="background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);">
      <div
        class="ray absolute blur-[10px] transform top-0 left-0 opacity-40 w-[220px] h-[45px] rounded-full rotate-[40deg]"
        style="background-color: #c7c7c7; box-shadow: 0 0 50px #fff; transform-origin: 10%;"></div>
      <div class="text text-6xl font-bold tracking-tight"
        style="background: linear-gradient(45deg, rgb(0, 0, 0) 4%, rgb(255, 255, 255), rgb(0, 0, 0)) text; color: transparent;">
        359k</div>
      <div class="text-white">Downloads</div>
      <div class="line topl absolute w-full h-[1px]"
        style="top: 10%; background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);"></div>
      <div class="line leftl absolute w-[1px] h-full"
        style="left: 10%; background: linear-gradient(180deg, #747474 30%, #222424 70%);"></div>
      <div class="line bottoml absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="line rightl absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>

  <style>
    @keyframes moveDot {

      0%,
      100% {
        top: 10%;
        right: 10%;
      }

      25% {
        top: 10%;
        right: calc(100% - 35px);
      }

      50% {
        top: calc(100% - 30px);
        right: calc(100% - 35px);
      }

      75% {
        top: calc(100% - 30px);
        right: 10%;
      }
    }
  </style>

  <script>
    lucide.createIcons();
  </script>
</body>

</html>

All Prompts