组件 价格显示 价格显示组件

价格显示组件

一个极简的价格显示组件,支持响应式和深色模式。

预览

HTML 代码

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    <span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
  </p>
</div>

相关组件

赛博朋克价格显示组件

一个用于咨询/服务的响应式价格显示组件,具有赛博朋克、未来主义的霓虹灯美学。具有深色背景、明亮的类似强调色,并支持深色模式。

打开

Price Display 组件

用于投资组合的复古风格复杂价格显示组件,具有三重配色方案、响应能力和使用 Tailwind CSS 的深色模式支持。不包含 JavaScript。

打开

价格显示组件

一种具有复古/古典美学的价格显示组件,具有响应设计和深色模式支持。

打开