Tailwind CSS Legend Indicator

                      
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-gray-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Legend indicator</span>
                        </div>
                      
                    

                      
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-gray-800 rounded-full mr-2 dark:bg-white"></span>
                          <span class="text-gray-600 dark:text-gray-400">Dark</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-gray-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Gray</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-red-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Red</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-yellow-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Yellow</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-green-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Green</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-blue-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Blue</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-indigo-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Indigo</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-purple-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Purple</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-pink-500 rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Pink</span>
                        </div>
                        <div class="inline-flex items-center">
                          <span class="w-2 h-2 inline-block bg-white rounded-full mr-2"></span>
                          <span class="text-gray-600 dark:text-gray-400">Light</span>
                        </div>