时间戳

首页 > 解决方案 > 如何在tailwindcss中实现带有徽章的数据列表

tailwind-css - 如何在tailwindcss中实现带有徽章的数据列表

问题描述

我如何在 tailwindcss 中实现带有徽章的数据列表，就像我在 bootstrap 中所做的那样：

<ul class="list-group m-0 p-1">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Number of ads
        <span class="badge badge-primary badge-pill">
            <span id="span_adsCount" style="font-weight: bold"></span>
        </span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Active ads
        <span class="badge badge-primary badge-pill">
            <span id="span_activeAdsCount" style="font-weight: bold"></span>
        </span>
    </li>
</ul>

请链接到示例...

谢谢！

标签： tailwind-css

解决方案

我创建了一个Tailwind Play 工作示例。

尽管如此，我强烈建议您阅读Tailwind Docs。它们是不言自明的。

<ul class="w-48 divide-y-2 divide-gray-200">
  <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Number of ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      2
    </div>
  </li>
  <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Active ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      4
    </div>
  </li>
    <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Expired ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      1
    </div>
  </li>
</ul>

推荐阅读