Developer-Friendly Tailwind General Components

Card With Action on Top

View

<js-component src="general/card_with_action_on_top"></js-component>

Custom Color Card

View

<js-component src="general/custom_color_card"></js-component>

Dark Card With Buttons

View

<js-component src="application/dark_card_with_buttons"></js-component>

Responsive Card

View

<js-component src="general/responsive_card"></js-component>

Weather Report Card

View

<div class="flex w-full">
  <div class="w-full bg-gray-800 p-8 text-white lg:my-3 lg:rounded-lg">
    <div class="mb-4 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Precipitation</div>
      <div class="w-auto text-right">10 %</div>
    </div>
    <div class="mb-4 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Humidity</div>
      <div class="w-auto text-right">29 %</div>
    </div>
    <div class="mb-8 flex w-64 w-full justify-between">
      <div class="text-90 w-auto font-bold uppercase">Wind</div>
      <div class="w-auto text-right">12 Mph</div>
    </div>
    <div class="flex flex-row">
      <div class="flex w-1/4 flex-col rounded-lg bg-gray-100 pb-4 text-black">
        <div class="mb-2 pt-2 text-center">
          <i class="fa-solid fa-sun mx-auto w-10 text-white"></i>
        </div>
        <div class="text-center">
          <b class="font-normal">Tue</b><br />
          <strong class="text-xl">29ºC</strong>
        </div>
      </div>

<js-component src="general/weather_report_card"></js-component>

Date and Weather Card

View

<js-component src="general/date_and_weather_card"></js-component>

Horizontal Card

View

<js-component src="general/horizontal_card"></js-component>

Cards Group

View

<js-component src="cards/group"></js-component>

Finance Cards

View

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 p-4">
  <div class="bg-white rounded-lg p-6 border border-gray-200">
    <h2 class="text-lg font-semibold mb-2">Account Balance</h2>
    <p class="text-xl font-bold">$5,200.00</p>
    <p class="text-sm text-gray-600">As of Auguest 1, 2023</p>
  </div>
  <div class="bg-white rounded-lg p-6 border border-gray-200">
    <h2 class="text-lg font-semibold mb-2">Recent Transaction</h2>
    <ul class="space-y-2">
      <li class="flex justify-between">
        <span>Grocery Store</span>
        <span>-$50.00</span>
      </li>
      <li class="flex justify-between">
        <span>Electricity Bill</span>
        <span>-$75.00</span>
      </li>
      <li class="flex justify-between">
        <span>Online Subscription</span>
        <span>-$10.00</span>
      </li>
    </ul>
  </div>
  <div class="bg-white rounded-lg p-6 border border-gray-200">
    <h2 class="text-lg font-semibold mb-2">Budget Summary</h2>
    <p class="text-sm">Total Budget: $1,500.00</p>
    <p class="text-sm">Spent: $900.00</p>
    <p class="text-sm">Remaining: $600.00</p>
  </div>
</div>

<js-component src="general/finance_cards"></js-component>

Progress Cards

View

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
  <div class="border border-gray-300 rounded-lg p-4">
    <h3 class="text-lg font-medium">Task 1</h3>
    <div class="mt-2">
      <div class="w-full bg-gray-200 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
      <p class="text-sm mt-2">75% Complete</p>
    </div>
  </div>

<div class="border border-gray-300 rounded-lg p-4">
    <h3 class="text-lg font-medium">Task 2</h3>
    <div class="mt-2">
      <div class="w-full bg-gray-200 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
      <p class="text-sm mt-2">50% Complete</p>
    </div>
  </div>

<div class="border border-gray-300 rounded-lg p-4">
    <h3 class="text-lg font-medium">Task 3</h3>
    <div class="mt-2">
      <div class="w-full bg-gray-200 rounded-full h-2.5">
        <div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
      </div>
      <p class="text-sm mt-2">25% Complete</p>
    </div>
  </div>
</div>

<js-component src="general/progress_cards"></js-component>

Pricing Cards

View

<div class="max-w-4xl mx-auto p-4 grid sm:grid-cols-1 md:grid-cols-3 gap-6">
  <div class="border rounded-lg p-6">
    <h3 class="text-xl font-semibold mb-2">Basic Plan</h3>
    <p class="text-2xl font-bold mb-4">$10/month</p>
    <ul class="mb-4 space-y-2">
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature A</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature B</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature C</li>
    </ul>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Select</button>
  </div>
  <div class="border rounded-lg p-6">
    <h3 class="text-xl font-semibold mb-2">Standard Plan</h3>
    <p class="text-2xl font-bold mb-4">$20/month</p>
    <ul class="mb-4 space-y-2">
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature A</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature B</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature C</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature D</li>
    </ul>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Select</button>
  </div>
  <div class="border rounded-lg p-6">
    <h3 class="text-xl font-semibold mb-2">Premium Plan</h3>
    <p class="text-2xl font-bold mb-4">$30/month</p>
    <ul class="mb-4 space-y-2">
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature A</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature B</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature C</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature D</li>
      <li class="flex items-center"><span class="h-2 w-2 bg-blue-500 rounded-full mr-2"></span>Feature E</li>
    </ul>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Select</button>
  </div>
</div>

<js-component src="general/pricing_cards"></js-component>

Icon Cards

View

<div class="flex flex-wrap space-x-4 space-y-4 justify-center items-center">
  <div class="w-64 h-32 p-4 border border-gray-200 rounded-md flex items-center">
    <div class="flex-shrink-0 mr-4">
      <svg class="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 13a1 1 0 112 0 5 5 0 01-5 5 5 5 0 01-5-5 1 1 0 112 0 3 3 0 006 0zm-3-6a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <h3 class="font-semibold text-lg">Card Title</h3>
      <p class="text-sm">This is the description for the card. It explains the concept or action represented by this card.</p>
    </div>
  </div>

<div class="w-64 h-32 p-4 border border-gray-200 rounded-md flex items-center">
    <div class="flex-shrink-0 mr-4">
      <svg class="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
      </svg>
    </div>
    <div>
      <h3 class="font-semibold text-lg">Card Title</h3>
      <p class="text-sm">This is the description for the card. It explains the concept or action represented by this card.</p>
    </div>
  </div>

<div class="w-64 h-32 p-4 border border-gray-200 rounded-md flex items-center">
    <div class="flex-shrink-0 mr-4">
      <svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M4.293 17.293a1 1 0 011.414 0L12 23.586l6.293-6.293a1 1 0 011.414 1.414l-7 7a1 1 0 01-1.414 0l-7-7a1 1 0 010-1.414z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M12 18a6 6 0 100-12 6 6 0 000 12zm0 2a8 8 0 110-16 8 8 0 010 16z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <h3 class="font-semibold text-lg">Card Title</h3>
      <p class="text-sm">This is the description for the card. It explains the concept or action represented by this card.</p>
    </div>
  </div>
</div>

<js-component src="general/icon_cards"></js-component>

Stats Cards

View

<div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="border border-gray-200 rounded-lg p-6 flex items-start justify-between bg-white">
        <div>
            <p class="text-sm font-semibold">Total Sales</p>
            <p class="text-2xl font-bold">$12,345</p>
            <p class="text-xs text-gray-500">+8% since last month</p>
        </div>
    </div>
    <div class="border border-gray-200 rounded-lg p-6 flex items-start justify-between bg-white">
        <div>
            <p class="text-sm font-semibold">New Users</p>
            <p class="text-2xl font-bold">1,234</p>
            <p class="text-xs text-gray-500">+3% since last week</p>
        </div>
    </div>
    <div class="border border-gray-200 rounded-lg p-6 flex items-start justify-between bg-white">
        <div>
            <p class="text-sm font-semibold">Active Subscriptions</p>
            <p class="text-2xl font-bold">567</p>
            <p class="text-xs text-gray-500">-2% since last month</p>
        </div>
    </div>
    <div class="border border-gray-200 rounded-lg p-6 flex items-start justify-between bg-white">
        <div>
            <p class="text-sm font-semibold">Customer Satisfaction</p>
            <p class="text-2xl font-bold">92%</p>
            <p class="text-xs text-gray-500">Average</p>
        </div>
    </div>
</div>

<js-component src="general/stats_cards"></js-component>

Social Cards

View

<div class="flex flex-wrap justify-center p-6">
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="border border-gray-300 rounded-lg overflow-hidden">
      <div class="bg-gray-100 p-4">
        <div class="font-bold text-lg">Social Media Title</div>
        <div class="text-sm text-gray-600">Social Media Description goes here...</div>
      </div>
      <img class="w-full" src="https://placehold.co/600x400" alt="Social Media Image">
      <div class="flex justify-between items-center p-4">
        <div class="text-sm text-gray-600">Date of post</div>
        <div class="flex space-x-2">
          <button class="p-2 border border-gray-300 rounded-full hover:bg-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V10a2 2 0 012-2h2m2 0V6a4 4 0 018 0v2m-6 4h6" /></svg>
          </button>
          <button class="p-2 border border-gray-300 rounded-full hover:bg-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12h2m5 2h2M9 15h.01M4 6h16a4 4 0 110 8H4a4 4 0 110-8zm0 4h16" /></svg>
          </button>
          <button class="p-2 border border-gray-300 rounded-full hover:bg-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 9l5 5m0 0l-5 5m5-5H3" /></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="general/social_cards"></js-component>

List Cards

View

<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4">
  <div class="w-full md:w-1/3 bg-white border border-gray-200 p-4 rounded-lg">
    <img src="https://placehold.co/300x200" alt="placeholder image" class="w-full h-auto rounded">
    <h2 class="mt-4 text-xl font-semibold">Card Title</h2>
    <p class="text-black mt-2 text-sm">A short description of the card content goes here. It can span a couple of lines, but it's best kept concise.</p>
  </div>
  <div class="w-full md:w-1/3 bg-white border border-gray-200 p-4 rounded-lg">
    <img src="https://placehold.co/300x200" alt="placeholder image" class="w-full h-auto rounded">
    <h2 class="mt-4 text-xl font-semibold">Card Title</h2>
    <p class="text-black mt-2 text-sm">A short description of the card content goes here. It can span a couple of lines, but it's best kept concise.</p>
  </div>
  <div class="w-full md:w-1/3 bg-white border border-gray-200 p-4 rounded-lg">
    <img src="https://placehold.co/300x200" alt="placeholder image" class="w-full h-auto rounded">
    <h2 class="mt-4 text-xl font-semibold">Card Title</h2>
    <p class="text-black mt-2 text-sm">A short description of the card content goes here. It can span a couple of lines, but it's best kept concise.</p>
  </div>
</div>

<js-component src="general/list_cards"></js-component>

Avatar Cards

View

<js-component src="general/avatar_cards"></js-component>

Profile Cards

View

<js-component src="general/profile_cards"></js-component>